Sublime Text で Javascript や CSS を圧縮し簡単かつ迅速に .min ファイルを作る方法

2015/09/18

Web サイトの表示を高速化する最も有効的手段は、データ通信量を抑えることです。ブログのような場合は、画像ファイルを大量に扱っているのでなかなかデータ量を減らすのは難しいですが、企業内で利用するような Web システムの場合は、Javascript やスタイルシートのファイルサイズを小さくすることで、極端な話、全体の通信量が半分以下に抑えられることもあります。

昨今の Web システムは jQuery 等を用いて、ユーザーインターフェースの向上やリッチクライアントを実現するケースが多いため、クライアントサイドで行う処理も増えているのが現実です。その分、クライアントサイド JS や、CSS ファイルの肥大化も避けられない状況となり、画面によっては Javascript だけでも何千ステップものソースになってしまう場面も多々あります。

スペース、タブのインデント情報や改行を削除すればファイルサイズは小さくなる

一般的に、Javascript や CSS ファイルは、プログラマが視認しやすいように、プロジェクトで決められたコーディング規約により、スペースやタブでのインデントが行われているのが一般的です。前述の通り何千ステップにもなった場合、インデントで利用しているスペースやタブだけで、数キロバイト費やす場合もあります。逆にこれらのインデントや改行のデータを削除してしまえば、ファイルサイズ自体は非常にコンパクトになります。

ファイル名に「.min」と入っているファイルを見たことはありますか?

xxxxx.min.js
yyyyy.min.css

元々これらのファイルは「xxxxx.js」と「yyyyy.css」としてそれぞれ存在しています。そして、このファイル内のインデントや改行、そして不要なコメントを取り除いてデータ量を圧縮した結果として、このようなファイル名を付けているケースが多いです。

ファイル圧縮の定番ツール YUI Compressor

ファイル内のインデントや改行、コメントを除くツールとして、Yahoo! が提供する YUI Compressor が有名です。このツールは jar で提供されており、Java が動かせる環境であれば利用することができます。しかし、毎度 Java コマンドの文章を作成するとなると非常に面倒です。

そこで今回は、Sublime Text 上で YUI Compressor を利用して簡単にファイル圧縮してしまう方法を紹介します。

YUI Compressor を利用するには、Java が実行できる環境であることが前提です。コマンドプロンプトで「java」とコマンドを入力し、コマンドが認識されていない場合は、Java がインストールされていない可能性があるので、以下のダウンロードサイトより Java をインストールしてください。
https://www.java.com/ja/download/manual.jsp

Sublime Text で YUI Compressor を利用しファイル圧縮する

以下、Windows 10 + Sublime Text 3 で行っています。Sublime Text そのもののインストール、およびプラグインをインストールするための Package Control を導入されていない方は、以下のページを参照ください。

【導入&日本語化】Sublime Text はプログラミングに最適なエディタ!
長年テキストエディタとして サクラエディタ を使用してきたのですが、もう一歩踏み込んだ機能が欲しくて、新たなテキストエディタとの出会いを求めていた昨今。ようや...

プラグインのインストール

  1. メニューから ツール(T) > コマンドパレット を選択
  2. Package Control: Install Package を選択
  3. 別のパレットが立ち上がるので YUI Compressor を検索し、選択
    compress-javascript-css-by-sublime-text02

これですぐに圧縮できる状態が整っていますが、初期インストール状態では、何文字以上まで達したら改行するかを定義するパラメータ「--line-break」が150文字設定になっています。つまり、150文字を超えた改行可能ポイントで改行する仕組みとなります。しかし、完全に圧縮したい場合は、可読性を問う必要はないので、このパラメータの定義は不要になります。

--line-break パラメータを無効化する

Sumlime Text のプラグイン情報が格納されているフォルダを開きます。メニュー [基本設定(n)] → [Packagesフォルダ(B)] を選択すると表示されます。Windows の場合は、以下のパスに格納されています。

C:\Users\(ユーザ名)\AppData\Roaming\Sublime Text 3\Packages\

各種パッケージフォルダが格納されているので、更に YUI Compressor フォルダを選択し、YUI Compressor.sublime-build ファイルを開きます。すると、--line-break パラメータを記載している部分があるので、頭にスラッシュを 2つ付けてコメントアウトしてしまいましょう。

compress-javascript-css-by-sublime-text03

設定を変更したら Sublime Text を再起動して準備完了です。では実際に圧縮をしてみましょう。

【実践】ファイル圧縮

まず圧縮したいファイルを開きます。そして Ctrl + B で完了です。処理結果は画面下に表示されます。今回の場合、わずか 0.3秒で変換が完了しました。

compress-javascript-css-by-sublime-text04

圧縮されたファイルは、ファイル名と拡張子の間に「.min」が付与されて、圧縮前のファイルと同じディレクトリ内に作成されます。今回実施したファイルは、142kB から66KB へ圧縮でき、約 55% の縮小に成功しました。

compress-javascript-css-by-sublime-text05
ショートカットキーを覚えるのが面倒な場合は、コマンドパレットを表示して YUI Compressor を探せば、Build コマンドが見つかるので、そちらをクリックして実行しても良いです。コマンドパレットは Ctrl + Shift + P もしくは、[ツール(T)] → [コマンドパレット] から開けます。

今回はサンプルとして 1ファイルだけでしたが、CSS ファイル等にも適用できるので、トータルではかなりのサイズを削ることができると思います。

まとめ

基本的にクライアントスクリプトは、ブラウザにキャッシュされますが、それでも今回のように 1ファイルだけで 80KB 近くもデータ転送量を減らせるとなると、大規模システムの場合は全体的にかなりの通信量をカットできますね。

サーバーのクラウド化が進み、転送量に応じた料金形態の仕組みも当たり前になってきています。システムが大きくなればデータ量も比例して大きくなります。全体のデータ量を減らすことは、大きなメリットになりますので、データ量削減の手段の一つとして、ファイル縮小化も検討してみてはいかがでしょうか。

今回は Sublime Text を経由して簡単にサイズを小さくする方法として紹介しましたが、YUI Compressor を利用すればコマンドプロンプトから縮小することも可能です。更には Eclipse 上でビルド時に縮小処理を走らせることもできるので、興味がある方は調べてみてください。

このブログの運営者

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。目指すところへの道のりは険しいですが、自分が自分らしくあるために、一歩ずつ進んでいきます!

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。よろしければフォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

最近のエントリー

Switch の画面がオレンジになって動かなくなった場合の対処法の1つ!セーブデータを保持したまま本体を初期化する!

プラグインを使わず WordPress の投稿ページで PHP の外部ファイルを呼び出す方法

Feedly ボタンが機能していない?!正しい URL の情報に変更する方法

Twitter で過去のツイートを閲覧・削除する方法

赤ちゃんが泣き止む動画「ふかふかかふかのうた」は生後3ヶ月の赤ちゃんにも効果抜群だった!

これで迷わない!東京ディズニーランドの喫煙所マップ一覧【写真付き】

iTunes でアートワークが反映されないのは WAV 形式が原因!AAC に変換すれば反映される!

【徹底比較】WiMAX 2+ ギガ放題プランの最安値はどこ?【2017年10月版】

おすすめのモバイルルーター・ポケット WiFi を比較!選ぶポイントは利用目的に合わせること!

公共料金の支払いはクレジットカードと口座振替のどっちがお得?