js・cssの圧縮にcompressor
Read More
jsにしてもcssにしてもなるべくコンパクトにした方がよい。
これはブラウザが読み込むデータ量が少なくなるからだ。
今までももちろん意識はしてきたつもりだけど、圧縮とかに関しては正直やったことがなかった。
だって必要に迫られることがなかったんだもの。
でもここにきて必要に迫られるようになってきたので圧縮ツールを調べてみた。
compressor
http://compressor.ebiene.de/
うん、中々いいんじゃないのコレ。
圧縮前と圧縮後のデータ量が表示されるし。
圧縮方法を二つ選択できるようになってて、
basic compressがコメント部分と半角スペースの削除で、
powerful compressがコメント部分と半角スペースと改行の削除。
まあbasic compressにするくらいなら最初からやる必要ないからpowerful compress一択だの。
今のシステムはこんなもん使わんといけんと思うほどjsとかcss読み込んでやがるのよ…
しかしあれだな。
こんなもん手作業でやらなくてもSmartyよろしく自動で圧縮したものを生成するのもおもしろそうだな。
例えば、
jsフォルダの中にbefore_compressionとかいうフォルダを用意しておいて、その中にjsファイルがあったらjsフォルダ直下に同名の圧縮したjsファイルを上書き生成するとか。
アクセスのたびに毎回生成しないように圧縮前と圧縮後のjsファイルの生成時間を比較すればいいか。
フォルダ名の変更やパスの変更にも柔軟に対応できるように、
圧縮するjsファイルを入れるフォルダパスと、
圧縮したものを出力するパスを、
それぞれ指定できるようにしておけばいいか。
おっと複数のパスを指定できるようにしとかないといけないな。
あ、でもまてよ。
jsファイルをphpファイル化してやれば、出力する際にのみ圧縮してやるようにすれば事足りるな。
…うん、後者の方が俺向きだな。
これはブラウザが読み込むデータ量が少なくなるからだ。
今までももちろん意識はしてきたつもりだけど、圧縮とかに関しては正直やったことがなかった。
だって必要に迫られることがなかったんだもの。
でもここにきて必要に迫られるようになってきたので圧縮ツールを調べてみた。
compressor
http://compressor.ebiene.de/
うん、中々いいんじゃないのコレ。
圧縮前と圧縮後のデータ量が表示されるし。
圧縮方法を二つ選択できるようになってて、
basic compressがコメント部分と半角スペースの削除で、
powerful compressがコメント部分と半角スペースと改行の削除。
まあbasic compressにするくらいなら最初からやる必要ないからpowerful compress一択だの。
今のシステムはこんなもん使わんといけんと思うほどjsとかcss読み込んでやがるのよ…
しかしあれだな。
こんなもん手作業でやらなくてもSmartyよろしく自動で圧縮したものを生成するのもおもしろそうだな。
例えば、
jsフォルダの中にbefore_compressionとかいうフォルダを用意しておいて、その中にjsファイルがあったらjsフォルダ直下に同名の圧縮したjsファイルを上書き生成するとか。
アクセスのたびに毎回生成しないように圧縮前と圧縮後のjsファイルの生成時間を比較すればいいか。
フォルダ名の変更やパスの変更にも柔軟に対応できるように、
圧縮するjsファイルを入れるフォルダパスと、
圧縮したものを出力するパスを、
それぞれ指定できるようにしておけばいいか。
おっと複数のパスを指定できるようにしとかないといけないな。
あ、でもまてよ。
jsファイルをphpファイル化してやれば、出力する際にのみ圧縮してやるようにすれば事足りるな。
…うん、後者の方が俺向きだな。
Category "HTML・JS・CSS" の最新記事
- マトリックス風な画面を動的に生成するページ (0)
- [CSS]checkboxとテキストの位置がずれるのを直す (0)
- [Javascript]ウィンドウを閉じるwindow.close()が効かない (0)
- [CSS]連番のIDやクラスをまとめて指定する書き方 (0)
- 本サイトのfont-familyを変更してみた (0)
- [HTML・JS・CSS]プロパティとアトリビュートの違い (4)
- [知らなかった]form要素のaction属性に指定するURLの末尾のスラッシュを省略すると (7)
- [CSS]ライン(border)に点線を使うとページスクロールが重くなった (2)
- [CSS]画面をスクロールしたときにサイドバーの要素を追尾させる方法 (0)
- input type="submit" でボタンに画像を使う方法 (6)