How to make moment.js lighter by execluding unused locale files

Category:

VuePress

Tags:

momentNPMVuePress

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

moment.js is a useful library often used for Javascript date format, but if you don't take any measures, it usually contains all of locale files you don't use such as Arabic or so. This heavy file might cause poor performance and , in my case, this resulted in a low score in PageSpeed Insights (opens new window).

Basically when you use moment.js, you can consider to exclude unnecessary locale files with moment-locales-webpack-plugin. In VuePress projects, you can configure this on configureWebpack in config.js.

First, install moment-locales-webpack-plugin with yarn or npm.

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

Then, write like this in .vuepress/config.js.

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

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

If you need other languages , change ["en","js"] to languages you need.