webpackでmoment.jsのロケール読み込みを無効化してバンドルサイズを削減する方法

ロケールファイルとは

ローカルファイル（ロケールファイル）とは、テーマのテンプレートファイル内で使用されるテキスト文字列の翻訳セットを含む .json ファイルのことです。言語ごとに個別のロケールファイルが用意されています。

moment.js をコード内で require して webpack でバンドルすると、すべてのロケールファイルがバンドルに含まれるため、バンドルサイズが非常に大きくなってしまいます。

この問題は、webpack の IgnorePlugin を使うことで解決できます。IgnorePlugin を利用すると、moment.js のすべてのロケールファイルをビルド対象から除外できます。

IgnorePluginを使った実装例

const webpack = require('webpack');
module.exports = {
    plugins: [
        // moment.js のすべてのロケールファイルを除外する
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
};

// コード内で必要なロケールだけを読み込む
const moment = require('moment');
require('moment/locale/ja');
moment.locale('ja');

webpack 5での書き方

webpack 5 以降では、IgnorePlugin の引数はオブジェクト形式で指定します。

new webpack.IgnorePlugin({
    resourceRegExp: /^\.\/locale$/,
    contextRegExp: /moment$/,
});

動作の仕組み

この設定を行うと、バンドル時には ja（日本語）など、コード内で明示的に require したロケールファイルだけが使用されます。その結果、不要なロケールファイルがすべて排除され、バンドルサイズを大幅に削減できます。

多言語対応が必要な場合は、必要な言語分だけ個別に require('moment/locale/xx') を呼び出せばよいので、機能を損なうことなく軽量化を実現できます。