Explaining how to optimize the large bundle size of moment.js with webpack

JavaScript 100.00%

how-to-optimize-momentjs-with-webpack's Introduction

How to optimize moment.js with webpack

When you write var moment = require('moment') in your code and pack with webpack, the size of the bundle file gets heavyweight because it includes all locale files.

To optimize the size, the two webpack plugins are available:

IgnorePlugin
ContextReplacementPlugin

Using `IgnorePlugin`

You can remove all locale files with the IgnorePlugin.

const webpack = require('webpack');
module.exports = {
  //...
  plugins: [
    // Ignore all locale files of moment.js
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
};

And you can still load some locales in your code.

const moment = require('moment');
require('moment/locale/ja');

moment.locale('ja');
...

Create React App and Next.js use this solution.

Using `ContextReplacementPlugin`

If you want to specify the including locale files in the webpack config file, you can use ContextReplacementPlugin.

const webpack = require('webpack');
module.exports = {
  //...
  plugins: [
    // load `moment/locale/ja.js` and `moment/locale/it.js`
    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /ja|it/),
  ],
};

In this case, you don't need load the locale files in your code.

const moment = require('moment');
moment.locale('ja');
...

Measurements

webpack: v3.10.0
moment.js: v2.20.1

	File size	Gzipped
Default	266 kB	69 kB
w/ IgnorePlugin	68.1 kB	22.6 kB
w/ ContextReplacementPlugin	68.3 kB	22.6 kB

Alternatives

If you are looking for the alternatives to moment.js, please see https://github.com/you-dont-need/You-Dont-Need-Momentjs.

References

how-to-optimize-momentjs-with-webpack's People

Contributors

Stargazers

Watchers

Forkers

suva renanrboliveira ryanm2000 kimek webisamurai thachpv91 zhanzizhen laudaikinhdi willowdubuc koechkevin dhanajayan henglau seawaves12 fyzgg

how-to-optimize-momentjs-with-webpack's Issues

"More cons..." is this a typo?

date-fns is an alternative libraly to moment.js. It doesn't need this kind of tricky solution and has more cons. It's worth considering.

Where you wrote "more cons" there, did you mean "more benefits"? Just asking as the link provided seems to be selling the benefits, and I found it a little confusing! :)

eslint error

my eslint report a error, does it matter?

to fix it, add a \:

new webpack.ContextReplacementPlugin(/moment[\\/\\]locale$/, /zh-cn/),
                                             ^

it seems work well, but i am not sure.

is /zh-cn/ works well?

mention date-fns in the README

date-fns is a library that provides similar functionality to moment, but more modularity via its exports pattern. It follows the "one function per file" methodology, and ships from npm with tree-shaking-ready distribution files (perfect for webpack2/rollup).

It doesn't require any webpack trickery in regards to configuration to keep what it adds to your bundle size relative to what you actually use.

Might be worth mentioning in the README, at your discretion. If not, feel free to close this issue - just thought it might be nice to suggest an alternative that comes at a lower cost to configuration.

optimize momentjs

Here i used moment :^2.24.0
I want to use specific locals in my code .I used this solution
const webpack = require('webpack');
module.exports = {
//...
plugins: [
// load moment/locale/ja.js and moment/locale/it.js
new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /ja|it/),
],
};
It didn't work for me , it still load other locals also.Please check.Thanks.

Dayjs is another good option

dayjs has a smaller core and has very similar APIs so it makes it very easy to migrate.

How about adding dayjs to our readme as well?

Reference : https://github.com/you-dont-need/You-Dont-Need-Momentjs

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

this is new syntax when using webpack ignore plugin, would be helpful to update your example with the latest.

https://webpack.js.org/plugins/ignore-plugin/

jmblog / how-to-optimize-momentjs-with-webpack Goto Github PK