個人的にwebサイト制作にほぼ必須なmoment.js。
下記のように、なんとなく導入します。
npm i --save moment
で使用したい箇所で、
import moment from 'moment';
これでmoment.jsが使用できます。しかし、このままではバンドルサイズが肥大化しています。
バンドルサイズに確認は、vue-cliで開発しているプロジェクトの場合は、次のコマンドを実行します。
vue-cli-service build --report
すると、dist/report.htmlが生成されるので、ブラウザで開いて確認してください。--reportによって、webpack-bundle-analyzerが実行され、レポートが出力されています。
このレポートはwebpackバンドル内の要素のサイズが面積として図示されたものです。お気づきの通り、moment.jsがVue.jsそのものよりも大きな面積を閉めてしまっています。上図はprodcution buildの結果ですが、moment.jsで540kBを締めています。
なぜこれだけサイズが大きいのかというと、localeというものが含まれているためです。ファイル名から想像がつきますが、多言語対応するための設定ファイルになっているます。例えば〇〇時〇〇分という表示をする時に、jaの設定が使えたりします。
対策
しかしながら、単純な時刻の整形に使用することが多いので、localeは必要ありません。また、カレンダー等のライブラリを使用している場合はロケールに依存している可能性が高いですが、使いたいのはja.js（日本語）だけだったりします。
そんな時に、わざわざ130ヶ国の言語の設定をバンドルに含むのは無駄になります。localeは合計で約400kBあり、moment.jsのコアの部分だけなら約150kBです。
そんな時はWebpackのIgnore Pluginを使用します。このプラグインは正規表現で指定したファイルはimportやrequireで依存関係が指定されていても、バンドルから除外することができます。
Webpackの設定と同様ですが、Vue.jsの場合はvue.config.jsに指定します。
configureWebpack: {
plugins: [
new webpack.IgnorePlugin( {
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/
} )
]
},
細かい話ですが、resourceRegExpには無視したいimportやrequireを指定します。moment.jsはロケールを
require('./locale/' + name);
で呼んでいるので, resourceRegExp: /^\.\/locale$/,を指定しています。
また、contextRegExpにはresourceRegExpを適用するフォルダ名を指定します。今回はmomentの文字で終了する全てのフォルダを対象にします。
以上から、localeは全て排除することができ、プロジェクト内でのimportは有効であるため、必要なlocaleだけをimportすることもできます。
import from "moment/locale/ja";
この状態で再度レポートを生成すると、、、
このようにmoment.jsのサイズが削減されました。
まとめ
moment.jsとか, Rx.jsとか何も考えずに導入するとバンドルを非常に肥大化させてしまうものがありますので、改めて注意喚起の意味で書きました。
ここまで読んだ方は多少身に覚えがあると思いますので、ご参考ください。