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

2015/09/18

compress-javascript-css-by-sublime-text01

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 3 導入&日本語化
長年テキストエディタとして サクラエディタ を使用してきたのですが、もう一歩踏み込んだ機能が欲しくて、新たなテキストエディタとの出会いを求めていた昨今。ようや...

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

  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 上でビルド時に縮小処理を走らせることもできるので、興味がある方は調べてみてください。

2017/01/22

個人事業主の開業届と青色申告の申請書を税務署へ提出!持ち物はマイナンバーカードを忘れずに!

2017/01/21

Chrome に表示された「保護された通信」「保護されない通信」とは?保護されないのは危険なのか?

2017/01/21

Word ファイルから画質を落とさず画像を取り出す方法

2017/01/20

Windows 10 でアプリをアンインストール(削除)する方法

2017/01/20

Windows 10 でデスクトップにマイコンピューターやコントロールパネルを表示する方法

2017/01/20

ファイアーエムブレムヒーローズのダウンロード方法とインストール手順【初期設定】

2017/01/17

青色申告の申請書「所得税の青色申告承認申請書」の書き方!例にならって入力すれば簡単に作成できる

2017/01/16

個人事業の開業届の書き方!例にならって入力すれば簡単に作成できる

2017/01/14

Nintendo Switch のコントローラーの充電方法は?標準の Joy-Con グリップでは充電できないので注意!

2017/01/14

Nintendo Switch の本体容量は 32GB しかない!容量追加はマイクロSDカードを利用する

→もっと見る

Name :
気力/体力勝負なシステム業界で揉まれています。自分が自分らしくあるために、大事なリセット、スタートします。

プロフィール詳細 Twitter @_NJ69_
Facebook ページ nj-clucker.com シェア
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑