JavaScriptファイルのサイズ軽減 のバックアップ(No.1)
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- 現在との差分 - Visual を表示
- ソース を表示
- JavaScriptファイルのサイズ軽減 へ行く。
- 1 (2009-12-31 (木) 13:43:48)
JavaScriptファイルのサイズ軽減について
XOOPSには最初からBBcode使用時などに使われる「xoops.js」という7KB程度のJavaScriptファイルが存在する。また、個々のモジュールが「Prototype」や「jQuery」といったライブラリと呼ばれるものを独自に持って読み込んだりする。xoops.jsの7KBはそれほどでもないが、ライブラリのファイルサイズは数万KBとかなり大きい。大きい分、圧縮がかなり効くので時間的な余裕があれば圧縮処理をしておきたい。
YUI Compressorを使っての圧縮
JavaScriptファイルは適度に改行が入っていたりして、人が後々編集しやすいように書かれている場合が多い。当然、読みやすくしているなりにファイルサイズが大きくなっている。しかし、個人がサイト運営を行うにあたってxoops.jsやPrototype、jQueryを独自にカスタマイズするというケースはまずないと思われるので、改行などは取っ払ってしまっても問題ない。難読化とも呼ばれる作業だが、YUI Compressorというプログラムを使ってJavaScriptファイルを圧縮してしまおう。
なお、JavaScriptファイルの圧縮(難読化)プログラムはいくつかあるが、たまに圧縮の仕方に問題があるのかJavaScriptが動かなくなるときがあるので注意したい。私がいくつか試した限りではYUI Compressorを使って問題が出たことはなかった。
参考サイト
gzipを使っての圧縮
「そこに並んでいる人たち、もっと詰めて~」という感じのYUI Compressorによる圧縮と比べると、gzipによる圧縮はもっとデジタルっぽい。実際は「1111111111」なのだがこれを「1が10」として、使うときに「1111111111」に戻そうという感じになる。圧縮率もかなりのもので、YUI Compressorによって7KBになったxoops.jsを2KBにまでにすることができる。ノーマルな状態では14KBなので実に7分の1の圧縮になる。
既存ファイルをgzip形式で圧縮できるソフトはLhaplusなどがある。
問題は「1111111111」を「1が10」と書かれてもうまく解釈できず、「1111111111」に戻せないブラウザもあるということだ。なので、そういったブラウザのためにmod_rewriteを使って「gzipを展開できるブラウザはこっち」「展開できないブラウザはこっち」という振り分けを行う。
xoops.js(ノーマル)
xoops.js.gz(gzipで圧縮したxoops.js)
とincludeフォルダ内に二つ用意し、同じくincludeフォルダの中に、
RewriteEngine on RewriteCond %{HTTP:Accept-Encoding} gzip RewriteCond %{REQUEST_FILENAME} !\.gz$ RewriteCond %{REQUEST_FILENAME}\.gz -s RewriteRule .+ %{REQUEST_URI}.gz ForceType application/x-javascript AddEncoding x-gzip .gz
と書いた.htaccessファイルを入れておくといいだろう。
参考サイト
prototype.jsを10KBにする方法 : 亜細亜ノ蛾 - Weblog
必要のないユーザには読み込ませないようにする
私の本家ではゲストユーザにフォーラムやコメント欄を開放していない。なので、ゲストユーザにxoops.jsを読み込ませる必要がない。よって、
<{if $xoops_isuser}> <script type="text/javascript"><{$xoops_js|regex_replace:"/(\/\/\-\->|<!\-\-)/":""}></script> <{/if}>
と括っている。こうすればゲストユーザには<script type="text/javascript"><{$xoops_js|regex_replace:"/(\/\/\-\->|<!\-\-)/":""}></script>が表示されず、当然、xoops.jsが読み込まれることもない。<{if $xoops_isuser}>は「登録ユーザにだけ(表示する)」という意味を持っていて、よく、「○○さんようこそ」という挨拶をログインした登録ユーザに見せるために使われているが、こんな使い方もできて便利だ。
自分を含めてサイトを利用する全員、BBcodeは使わないということであれば、themesフォルダ内テーマ別フォルダ(たとえばthemes/default)の中にあるtheme.htmlから
<script type="text/javascript"><{$xoops_js|regex_replace:"/(\/\/\-\->|<!\-\-)/":""}></script>
↑自体を削除してしまってもいいだろう。
ゲストには読み込んでもらう必要があるが、登録ユーザには読み込ませたくないというJavaScriptファイルもあるかもしれない。その場合は<{if $xoops_isuser}>を<{if !$xoops_isuser}>(=登録ユーザ以外にの意)にして、
<{if !$xoops_isuser}> <script type="text/javascript" src="hoge.js"></script> <{/if}>
と括ればよい。
[PR]