出力ファイルは極力圧縮したい
Webサービスにおいて、コンテンツ内容や機能面の充実度が重要であることは言うまでもありませんが、ページのパフォーマンスも重要ですよね。
当然遅いより早い方が良いに決まっています。
今回はパフォーマンス改善策の1つである、ファイルの圧縮についてです。
正直ファイルの圧縮は違いが体感できるほど大きな効果は期待できないものですが、工数をあまりかけずに対応できるなら対応しておいた方が良いでしょう。
GoogleのPageSpeed Insightsも圧縮しろってうるさいですしね…w
Vue.jsでのnpmビルド時に同時に圧縮
Vue.jsでは、ビルド時(コンパイル時)に圧縮したい場合、非常に簡単にできるため、その方法を共有します。
今回はhtmlファイル、cssファイル、jsファイルのみをgzip化します。
画像などは頻繁に変更が起きないので、必要があれば随時手動で行えば良いですし、毎回gzip化させるのは無駄に時間がかかるので。
手順
まずは、vue/config/index.jsで以下のパラメータをtrueにします。
vue/config/index.js
productionGzip: true,
これだけ見ると、もうgzipに圧縮できてしまいそうですよね。
意気揚々とこの状態で
npm run buildすると
Error: Cannot find module 'compression-webpack-plugin’
と早速エラーが。
エラー内容を見ると、compression-webpack-pluginのモジュールがないと言っていますね。
そういえばvue/config/index.jsのproductionGzipの上にもこんな文言が
// Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin
compression-webpack-pluginをインストールしてって書いてましたね。
ということで、目的のモジュールをインストールします。
npm install --save-dev compression-webpack-plugin
さあ、これで今度こそ大丈夫だろうと再度ビルドを実行してみると、
以下のようなエラーが
/********/src/main/vue/node_modules/compression-webpack-plugin/node_modules/schema-utils/src/validateOptions.js:32
throw new ValidationError(ajv.errors, name);
^
ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties色々調べてみると、どうやらwebpackConfigのpluginsに設定の追加が必要らしく、webpack.prod.conf.jsに(webpack.base.conf.jsでも大丈夫です。環境によってどちらかに入れてください。)以下を追加しました。
webpack.prod.conf.js
// 上の方の変数宣言してるあたりに追加 var CompressionPlugin = require('compression-webpack-plugin’) var webpackConfig = merge(baseWebpackConfig, { ・ ・ ・ plugins: [ ・ ・ ・ new CompressionPlugin() // ここに追加 ] })
これで良いだろうと実行してみたのですが、再度上記と同じエラーが出ました。
なかなかうまくいきませんね。。。
ここはだいぶハマりましたが、解決法としては、先ほどインストールしたcompression-webpack-pluginのバージョンを下げれば上手くいきました。
ということで、2.0.0から1.1.11に下げてみます。
package.jsonの、
"compression-webpack-plugin": “^2.0.0”,
の箇所を
"compression-webpack-plugin": "^1.1.11”,
に変更し、以下コマンドの実行です。
npm install
さあ、これでビルドしてみましょう。
jsやcss、htmlのgzファイルが作られていることがわかりますね。
ついにgzip化に成功です！
サーバ側でgzipを読み込む設定にする
さて、みなさんご存知とは思いますが、gzip化できたと言っても、ただディレクトリ上にgzファイルが存在していれば読み込んでくれるというわけではありません。
ApacheやNginx、または.htaccessで、gzipファイルを読み込むよう設定する必要があるので、gzファイルができたからと言って安心せずにサーバ側の設定も変更してください。
