[technique 10]CSS、JavaScriptを簡単に圧縮する | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

作業効率がアップする隠れた使い方教えます!

WEB制作、プロの無料サービス活用術
──コーディングに使えるツール(2)


[technique 10]

CSS、JavaScriptを簡単に圧縮する

文=山田岳史(ROSTRATA)

Tool Online YUI Compressor
URL http://refresh-sf.com/yui/

幅広く使える


こちらはJavaScriptやCSSファイルをオンラインで瞬時に圧縮してくれるツールだ。具体的には改行やコメントの削除、また変数名を最小限の文字に置換するといった処理が行われる。これらに加えて難読化もするかどうか、不要なセミコロンを削除するかどうかなどのオプションが選択できる。アクセス数の多いサイトでは、JavaScript、CSSのわずかなサイズのテキストファイルでもトータルのトラフィック量では大きな差となるため、できるだけ圧縮しておきたい。

対象となるコードを指定し、ファイルタイプを選択するだけだ
対象となるコードを指定し、ファイルタイプを選択するだけだ

160KBのJSファイルを圧縮してみるとほぼ半分となった
160KBのJSファイルを圧縮してみるとほぼ半分となった


[INDEX]

>>> [technique 07]CSS Spriteを手軽に作成する
>>> [technique 08]肥大したCSSファイルを圧縮する
>>> [technique 09]フォントサイズの比率をemや%を一覧で表示する
>>> [technique 10]CSS、JavaScriptを簡単に圧縮する
>>> [technique 11]フォントをオンラインで視覚的にテスト比較する
>>> [technique 12].htaccessファイルをGUIで簡単に作成する
>>> [technique 13]JavaScriptを難読化しファイル容量を抑える

COVER101

本記事は『web creators』2010 vol.101からの転載です。本特集全記事は誌面で読むことができます。
月刊『web creators』掲載記事号の情報はこちら!
>>>
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在