NetBeans JS CSS Minify Compress プラグインを使い縮小化してみる

JavaScript, CSS の縮小化

WordPress の Celtis-one テーマを開発していて、作成した JavaScript や CSS を今まで開発中の状態のまま公開していたのですが、NetBeans から簡単に縮小化する JS CSS Minify Compress プラグインがあったので導入してみました

今まであまり気にしていなかったのですが、サイトを高速化するには小さなことの積み上げが大事なので、今回挑戦してみました

ミニファイ化することで、ファイルサイズが半分以下になることも多く、それだけでわずかでも高速化することが期待できます (^^)

また、NetBeansでの開発作業で開発版のスクリプトファイルと配布版のミニファイ化したスクリプトファイル簡単に切り替える方法も紹介します

Webエンジニアには常識的なことなのでしょうが、簡単に出来るのでお勧めです (^^)

プラグイン導入

メニューの ツール→プラグインを選択します

使用可能なプラグインのタブを選択して、検索ボックスへ JS とタイプするとリストに表示されるはずです

pruginsearch

JS CSS Minify Compress プラグインをチェックして、インストール ボタンをクリックします

インストール

minify-install

ダイアログが表示されるので、インストールを進めます

使用許諾等の確認が表示されるので許諾してインストールを完了させます

概要

http://plugins.netbeans.org/plugin/49666/js-css-minify-compress

要約すると、このプラグインは、JS / CSS / HTMLファイルのサイズを縮小化ことによって、ページのロード時間を速くする為のプラグインです

機能を変更せずに、ソースコードから空白文字、改行文字、コメント、ブロックの区切り文字等の不要な文字を削除します

また、画像PNG / JPEGの圧縮や画像をBase64エンコーダ/デコーダする機能もサポートしているようです

オプション

メニューの ツール→オプションを選択します

JS CSS Minify Compress を選びオプションを確認します

1.JavaScript 縮小オプション

option-js

単一の JS ファイルを縮小化するオプションです

JS のソースファイルを NetBeans から選択して右クリックから Minify JS を選択して実行します

ここに指定している Pre External と Separater がミニファイ化したファイル名に付きます

例えば sample.js をミニファイ化すると sample.min.js というファイルが作成されます

JS Obfuscate オプションが指定されていれば、不要文字の削除だけでなく、ローカル変数のリネームや関数内の引数名の短縮化なども行います

2.CSS 縮小オプション

option-css

単一の CSS ファイルを縮小化するオプションです

CSS のソースファイルを NetBeans から選択して右クリックから Minify CSS を選択して実行します

ここに指定している Pre External と Separater がミニファイ化したファイル名に付きます

例えば style.css をミニファイ化すると style.min.css というファイルが作成されます

3.HTML 縮小オプション

option-inlinehtml

単一の HTML ファイルを縮小化するオプションです

使用していないので動作確認してませんが、HTMLファイルの不要文字を削除するようです
また、インラインで記述してある JS, CSS に対しても実行するか指定できるようです

4.ノード単位の縮小オプション

option-project

これも使用していませんが、フォルダを指定してすべてのJS、CSS,HTML(チェックして選択)を一括して縮小化するときに使用するようです

Pre External のついた縮小化済みファイルのスキップも指定できるようです

縮小化実行

JSファイル

MinifyJS

 

jsfile-minfy

celtis-script.js ファイルを右クリックして Minify JS を実行してみました

あっという間に終わり、43%ほど縮小化されたようです

CSSファイル

MinifyCSS

cssfile-minify

同様に style.css ファイルを縮小化すると 33% ほど縮小化出来ました

少し中を見てみると

margin-top: 7px;
margin-left: 7px;
margin-bottom: 7px;
margin-right: 7px;

のような記述は、そのまま不要文字が削除されているだけで、さすがに margin: 7px というようなところまでは縮小化されていませんでした (^^)

もっと強力なツールもあるかも知れませんが、現時点では、自分で無駄のないように気をつけるってところです

JS,CSSを開発と公開で切り替えるには

WordPressでは、SCRIPT_DEBUG という定義を使用して、ミニファイ化したファイルと開発用のファイルを切り替えるのが流儀のようです

wp-config.php ファイルに SCRIPT_DEBUG を定義します

SCRIPT_DEBUG

あとは、JSスクリプトやCSSファイルを読み込んでいる部分で SCRIPT_DEBUG 定義によりどちらのファイルを読み込むかを選択できるようにします

SCRIPT_DEBUG が未指定か false ならミニファイ化したファイルを使用するようにします

CSSの場合はこんな感じの記述

$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
wp_enqueue_style( 'celtisone-style', get_stylesheet_directory_uri(). "/style{$suffix}.css", array(), null );

JSの場合はこんな感じに記述します

 $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
 wp_enqueue_script('celtis-scripts', get_template_directory_uri() . "/js/celtis-scripts{$suffix}.js", array('jquery'), null, true);

wp_enqueue_style や wp_enqueue_scripts でファイルを読み込むところで {$suffix} を記述しておくだけです

ちなみにプラグインの pre External で指定している文字と一致させる必要があります

特別な理由がなければデフォルトのままの .min としておくのがわかりやすいと思います (^^)

これでデバッグ中は、 wp-config.php の SCRIPT_DEBUG 行をコメントにするかどうかだけで簡単に切り替えられるようになります

また、実際のサイトでは SCRIPT_DEBUG 定義がされていない環境での動作なのでミニファイ化された側が選択されるようになります

今日は、JSとCSSのミニファイ化について紹介しました

では

 

関連コンテンツ


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss