JavaScriptファイルのサイズ軽減 のバックアップ(No.1)

JavaScriptファイルのサイズ軽減について

　XOOPSには最初からBBcode使用時などに使われる「xoops.js」という7KB程度のJavaScriptファイルが存在する。また、個々のモジュールが「Prototype」や「jQuery」といったライブラリと呼ばれるものを独自に持って読み込んだりする。xoops.jsの7KBはそれほどでもないが、ライブラリのファイルサイズは数万KBとかなり大きい。大きい分、圧縮がかなり効くので時間的な余裕があれば圧縮処理をしておきたい。

YUI Compressorを使っての圧縮

　JavaScriptファイルは適度に改行が入っていたりして、人が後々編集しやすいように書かれている場合が多い。当然、読みやすくしているなりにファイルサイズが大きくなっている。しかし、個人がサイト運営を行うにあたってxoops.jsやPrototype、jQueryを独自にカスタマイズするというケースはまずないと思われるので、改行などは取っ払ってしまっても問題ない。難読化とも呼ばれる作業だが、YUI Compressorというプログラムを使ってJavaScriptファイルを圧縮してしまおう。

　YUI Compressor

　なお、JavaScriptファイルの圧縮(難読化)プログラムはいくつかあるが、たまに圧縮の仕方に問題があるのかJavaScriptが動かなくなるときがあるので注意したい。私がいくつか試した限りではYUI Compressorを使って問題が出たことはなかった。

そのままのxoops.jsYUI Compressorで圧縮したxoops.js
xoops_js.gif
xoops_js2.gif
14KB7KB

参考サイト

　YUI Compressor - StackTrace

gzipを使っての圧縮

「そこに並んでいる人たち、もっと詰めて～」という感じのYUI Compressorによる圧縮と比べると、gzipによる圧縮はもっとデジタルっぽい。実際は「1111111111」なのだがこれを「1が10」として、使うときに「1111111111」に戻そうという感じになる。圧縮率もかなりのもので、YUI Compressorによって7KBになったxoops.jsを2KBにまでにすることができる。ノーマルな状態では14KBなので実に7分の1の圧縮になる。
　既存ファイルをgzip形式で圧縮できるソフトはLhaplusなどがある。

　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]