momentのlocaleファイルが肥大化する問題

Category:

VuePress

Tags:

momentNPMVuePress

Last Updated: 2021/12/13 12:40:54

Javascriptの日付フォーマット関係の調整に定番の moment だが、何も考えずにそのまま使うと用意されているすべての言語ファイルを組み込んだ状態でビルドされてしまいファイル肥大化の原因になりがちなので、基本的にmomentを使うときは moment-locales-webpack-plugin プラグインで必要なロケールに限定するようにしたほうがよい。

VuePressの場合は、config.js に configureWebpack という項目があるので、そこで設定するようにする。

まずは yarn か npm で moment-locales-webpack-plugin プラグインをインストール。

$  yarn add -D moment-locales-webpack-plugin

そうしたら .vuepress/config.js に下記のように設定する。

const MomentLocalesPlugin = require("moment-locales-webpack-plugin");

module.exposts ={
	configureWebpack: {
		plugins: [
			new MomentLocalesPlugin({localesToKeep: ["en","ja"]}), 
		]
	}
};

もし他の言語が必要なら ["en","js"] と書いてあるところに付け加えていけばよい。