はじめに

Webpackのパフォーマンスでは様々な面で取り組むことができますが、ライブラリに利用されないはずのファイルがバンドルに含まれ、結果的にバンドルサイズが大きくなってしまっている場面にあいました。

そこで行ったことをmoment.jsを例として残します

事前調査

moment.jsを利用して日本語のみの利用を前提とします。

まず、特に意識しないで利用してみましょう。

import moment from "moment";

moment.lang("jp");

console.log(moment().format("M月D日（dd）"));

これらをwebpack-bundle-analyzerでみると以下のような感じになります。

moment.jsではlocaleファイルにそれぞれの地域に対するファイルがそれぞれ用意されており、importすれば全てがバンドルに含まれるようになります。

今回、jpファイルしか利用しないので他にあるファイルは余分になっています。

これによってバンドルサイズが大きくなってしまっているので、これをどうにかしましょうという話です。

対策として様々な手段で省くことができますが、今回はwebpack.IgnorePluginを利用してみます。

まずwebpack設定ファイルに以下を追記します。

plugins: [
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],

これでmoment.jsのlocaleは全てビルドに含まれてなくなりました。

そして/src/utils/moment.jsのようなファイルを作成し、以下を追記します

import moment from "moment";
import "moment/locale/ja";

moment.lang("jp");

export default moment;

これでlocale/jaのみがバンドルに含まれるようになります。

結果は以下のとおりです。

以上のようにしてバンドルサイズを減らすことができました。webpack.IgnorePluginは使い方次第ではライブラリが正常に動作しなくなる原因でもあるので気をつけて利用した方が良さそうです。

以上です