Webpackでビルドしたbundleファイルのサイズを減らす
2018-03-09

Webpackでビルドしたbundleファイルのサイズを減らす

最近、割と耳にするようになってきた、Webpackのbundle.jsのサイズを減らす話。自分でもやってみたので、結果を紹介します。

本当はもう少し減らせるかもねー

はじめに

現在の使っているライブラリはこんな感じです。

  • React
  • Redux + redux-observable

ちなみに2つのアプリケーションがあるので、bundleは2つに分けてます。

最初の状態はこちらです。サードパーティのライブラリ(node_modules)のサイズが大きいことがわかります。

File sizes after gzip:

629.89 KB build/static/js/organization.js
595.88 KB build/static/js/applicant.js
49.28 KB build/static/css/organization.css
49.26 KB build/static/css/applicant.css

大きいのは、まずhighlight.jsですね。

// ()の中はGzipしたサイズ
--------------------------------
highlight.js  750KB(190KB)
C3.js         677KB(93KB)
rx.js         686KB(32KB)
joi-browser   382KB(40KB)

highlight.jsのサイズを減らす

やりかたは前に書いた自分の記事を参考に。。。

結果:

File sizes after gzip:

456.75 KB build/static/js/organization.js
422.79 KB build/static/js/applicant.js
49.7 KB build/static/css/organization.css
49.69 KB build/static/css/applicant.css

highlight.jsは「750KB(90KB) => 90KB(17KB)」になりました。

RxJSのサイズを減らす

やりかたはこれを参考にしました。

結果:

File sizes after gzip:

430.94 KB build/static/js/organization.js
397.02 KB build/static/js/applicant.js
49.7 KB build/static/css/organization.css
49.69 KB build/static/css/applicant.css

RxJSは「686KB(32KB) => 164KB(9KB)」になりました。

lodashのサイズを減らす

C3.jsjoi-browserはパッとみた感じ減らすのちょっと難しそうだと感じたので、lodashのサイズを減らしてみることにしました。

通常のlodashはES6のモジュール形式ではないので、ES6モジュール形式でビルドされているlodash-esの方を使います。

これまでimportしていた箇所をこのように変えていきます。

- import { isEqual } from "lodash";
+ import isEqual from "lodash-es/isEqual";

結果:

File sizes after gzip:

414.23 KB build/static/js/organization.js
380.24 KB build/static/js/applicant.js
49.69 KB build/static/css/organization.css
49.68 KB build/static/css/applicant.css

lodashは「526KB(24KB) => 87KB(5KB)」になりました。

まとめ

だいたい3割くらい減らすことができました。

File sizes after gzip:

build/static/js/organization.js
  629.89 KB => 414.23 KB (65.7%)
build/static/js/applicant.js
  595.88 KB => 397.02 KB (66.6%)

Webpack便利なのでついライブラリ追加してしまいがちですが、バンドルサイズが大きくなってないか常に気をつけたいですね。
バンドルサイズの測定はwebpack-bundle-analyzerを使って行いました。