エックスサーバー：アップロードしたJavaScriptファイルが更新されないときの原因と対処

エックスサーバーに1度アップロードしたJavaScriptファイルを修正して再度アップロードしたら以前のままの状態だった。
Chromeの「キャッシュの消去とハード再読み込み」を試してみたが変わらず。

時間差かも？と思って1日ほど待ってみたが、アクセスするタイミングによって以前のファイルだったり新しいファイルの状態になっていたりと挙動不審な状態だった。

原因
対処方法
XPageSpeedのJavaScript最適化をONにするとどうなるか？

原因

エックスサーバーのサーバ管理の設定にあるXPageSpeed設定の項目で、「JavaScript最適化」がONになっていることが原因だった。

対処方法

XPageSpeed設定の項目で、「JavaScript最適化」をOFFにする。

XPageSpeedのJavaScript最適化をONにするとどうなるか？

例えば、以下のようなindex.htmlとmain.jsからなるサイトをアップしたとする。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="main.js"></script>
    <title>Web Audio APIの基本</title>
</head>
<body>
    <p>Web Audio APIの基本</p>
    <!-- 利用する音声ファイル -->
    <audio src="maou_bgm_8bit29.mp3"></audio>

    <!-- 再生ボタン -->
    <button>Play</button>
</body>
</html>

main.js

// Web Audio APIの基本

window.addEventListener("load", ()=>{
	// 古いブラウザ向けの設定
	const AudioContext = window.AudioContext || window.webkitAudioContext;

	// 音声コンテキスト作成
	const audioContext = new AudioContext();

	// 音声ファイル（入力元）を取得
	const audio = document.querySelector("audio");

	// 音声コンテキストに音声ファイルを設定する
	const track = audioContext.createMediaElementSource(audio);

	// PLAYボタン取得
	const playButton = document.querySelector("button");

	// PLAYボタンを押した時の処理
	playButton.addEventListener(
		"click",
		function(){
			audio.play();	// 再生する
		},
		false
	);

	// 設定済みの音声ファイルの音声コンテキストを出力先（スピーカー）に接続
	track.connect(audioContext.destination);
});

XPageSpeedをONにしてあると、このサイトを読み込んだときにmain.jsがindex.htmlに埋め込まれた状態になり以下のようなファイルにアクセスすることになる。

index.html

 <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>//<![CDATA[
window.addEventListener("load",()=>{const AudioContext=window.AudioContext||window.webkitAudioContext;const audioContext=new AudioContext();const audio=document.querySelector("audio");const track=audioContext.createMediaElementSource(audio);const playButton=document.querySelector("button");playButton.addEventListener("click",function(){audio.play();},false);track.connect(audioContext.destination);});
//]]></script>
<title>Web Audio APIの基本</title>
</head>
<body><noscript><meta HTTP-EQUIV="refresh" content="0;url='https://dianxnao.com/js/webaudio/beginner/?PageSpeed=noscript'" /><style><!--table,div,span,font,p{display:none} --></style><div style="display:block">Please click <a href="https://dianxnao.com/js/webaudio/beginner/?PageSpeed=noscript">here</a> if you are not redirected within a few seconds.</div></noscript>
<p>Web Audio APIの基本</p>
<!-- 利用する音声ファイル -->
<audio src="maou_bgm_8bit29.mp3"></audio>
<!-- 再生ボタン -->
<button>Play</button>
</body>
</html>

XPageSpeedは、エックスサーバーでのサイトアクセスのスピードを上げるための技術だ。

前述のようにJavaScriptファイルを縮小して最適化しHTMLファイルに埋め込むだけなら問題なさそうなのだが、なぜかJavaScript最適化の項目をONにすると同じファイルを修正してアップし直したりすると内容が更新されないことが多いのだ。

今回、ブラウザのキャッシュクリアだの色々と試して何時間も同じことで悩んでしまった。

エックスサーバーのサポートに問い合わせて得られた回答の中に原因と考えられる項目として、このJavaScriptの最適化があった。質問してその日のうちに知る事ができた。最初から素直にサポートに問い合わせれば良かったと感じた。

エックスサーバーは問合せるとレスポンスも速いし、良心的なレンタルサーバー会社の一つだと思う。