webpack3とwebpack4でファイル圧縮率がどれくらい違うか確かめてみる

環境

• Ubuntu : 16.04LTS
• node.js : 8.9.4
• npm : 5.6.0

webpack

• 旧 : 3.11.0
• 新 : 4.0.1

検証(web)アプリ

これ (ソースはこちら)
Reactをbabeった程度のシンプルな構成です

package.json

webpackを『4』にバージョンアップ
加えて『4』ではクライアントツールとして「webpack-cli」を別途インストールする必要がある

package.json___devDependencies

-    "webpack": "^3.6.0"
+    "webpack": "^4.0.1",
+    "webpack-cli": "^2.0.10"

webpack.config.js

『4』に合わせて修正します

 const webpack = require('webpack');
-const COMMIT_HASH = process.env.COMMIT_HASH || 'dev-environment'
+
+const isProduction = !!process.env.COMMIT_HASH
+
+const COMMIT_HASH = isProduction ?
+                      process.env.COMMIT_HASH : 'dev-environment'
+
+const mode = isProduction ? 'production' : 'development'

 module.exports = {
     entry: {
       filename: `bundle.${COMMIT_HASH}.js`
     },
     module: {
-      loaders: [
+      rules: [
         {
           loader: 'babel-loader',
-          exclude: /node_modules/,
+          exclude: [ /node_modules/ ],
           test: /\.js[x]?$/,
-          query: {
+          options: {
             cacheDirectory: true,
             presets: ['react', 'env'],
             plugins: ["transform-function-bind"]
           }
         }
       ]
     },
-    devtool: 'source-map'
+    mode
 };

ポイントは『4』の追加要素である「mode」
production : ファイル圧縮率高め。ソースマッピング無し
development : ファイル圧縮率低め。ソースマッピング有り
合わせて本番と開発、環境に応じてスイッチ出来る様に修正
(ファイル自体分けて運用した方がいいのかな・・・?)

試してみる

• 本番用のbundleで試してみる
  • modeはproduction

COMMIT_HASH=$(git rev-parse HEAD) webpack -d # 開発用の構成ならwebpack -d

3.11.0

Version: webpack 3.11.0
Time: 23873ms
                    Asset     Size  Chunks                    Chunk Names
bundle.js  3.15 MB       0  [emitted]  [big]  bundle

4.0.1

Version: webpack 4.0.1
Time: 14658ms
Built at: 2018-3-3 07:46:02
                                             Asset      Size  Chunks                    Chunk Names
bundle.js  2.77 MiB  bundle  [emitted]  [big]  bundle

結果を一部抜粋

• ファイルサイズ
  • 3.11.0 : 3.15MB
  • 4.0.1 : 2.77MB
• ビルド時間
  • 3.11.0 : 23873ms
  • 4.0.1 : 14658ms

まとめ

期待していた圧縮率は「こんなもんか」という感じでしたが、ファイルの数等にも伴うのかもしれません。
今回試したアプリは全5、6ファイルの小規模なアプリでした(コンポーネント指向で作る必要はあったのか)

公式のドキュメントもあんまりちゃんと読まずに、勢いで試してみたので、間違い、勘違い等々見受けられましたら、ご指摘等頂ければ幸いです。