概要
Minifyとは
Minifyとは、コード内の不要な改行やインデントを削除して、動作はそのままの状態で、圧縮・軽量化することをいいます。逆に、Minifyしたコードを整形し直すことをBeautifyといいます。
Minifyは主に、CSSやJavaScriptで行われることが多いです。
Minifyする利点
- ファイルサイズが小さくなり、表示の高速化ができる
- 可読性が下がるため、ブラウザからコードの解析がしにくい
今回の内容
下記、Minifyプラグインやテンプレートエンジンを使ったHTMLファイルのMinifyを行った結果を備忘録としてまとめていきます。
-
使用したMinifyプラグイン
-
gulp-htmlmin: HTMLのMinify -
gulp-clean-css: CSSのMinify -
gulp-uglify: javaScriptのMinify
-
-
使用したテンプレートエンジン
- JavaScriptのテンプレートエンジンの
jquery-tmpl - PHPのテンプレートエンジンの
Smarty
- JavaScriptのテンプレートエンジンの
備忘録
テンプレートエンジンを使ったHTMLの場合
-
Minifyできる
- 純粋なHTMLタグ
- HTMLタグ内のphpやSmartyのタグ
- HTMLタグ内のにstyleタグ
- HTMLタグ内のにscriptタグ
- jquery-tmpl内のテンプレート内のHTML
-
Minifyできない
- HTMLのscriptタグの中の、phpやsmartyのタグ
- jquery-tmpl内に、phpやsmartyのタグ
- jquery-tmplの中で文字列の
< >( HTMLタグと判定できてしまうもの )
意外とMinifyできましたが、複数のテンプレートエンジンが絡んでくると、構造が崩れてしまったり、エラーになったりしてしまいうまくMinifyができませんでした。
別の言語のテンプレートエンジンでも同じ現象が起こるかと思われるため、複数のテンプレートエンジンは同居させずにできるだけファイルを分けたほうが良いと思われます。
HTMLタグだけどうまくいかない場合
inline要素だと「改行した場合」と「1行の場合」に違いが出てしまうため、Minifyすると以下のようにレイアウトが崩れてしまいます。
- 改行した場合
<span>AAAA</span>
<span>BBBB</span>
- 1行の場合
<span>AAAA</span><span>BBBB</span>
HTMLのMinifyするときは、改行を行わないような設定が必要と考えられます。
運用のルール
HTMLのMinify組み込んだときに以下ルールでちゃんと運用するようになりました。
（内容としてはめちゃくちゃ普通のことですが...）
- 複数のテンプレートエンジンが混在しないように整理する、1本化を進める。
- JavaScriptやCSSはできるだけ外部ファイルとして管理する。
- Minifyするときに元ファイルは残す。
おわりに
今回は、HTMLファイルのMinifyについてまとめましたが、
正直なところ、HTML部分に関しては軽量化したことによる効果は、あまり感じられませんでした。
成果としては、Minifyについての知見に加え、コードの書き方やリファクタリング方法などといった考え方の確立や整理ができたことが、1番成長できたと感じています。
以上です。ここまで見ていただきありがとうございました。