如何用webpack优化moment.js的体积

本篇为转译，原出处。

当你在代码中写了var moment = require('moment') 而后再用webpack打包, 打出来的包会比你想象中的大不少，由于打包结果包含了各地的local文件.

解决方案是下面的两个webpack插件，任选其一:

1. IgnorePlugin
2. ContextReplacementPlugin

方案一：使用 IgnorePlugin插件

IgnorePlugin的原理是会移除moment的全部本地文件，由于咱们不少时候在开发中根本不会使用到。 这个插件的使用方式以下：

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');
...
复制代码

这个方案被用在 create-react-app.

方案二：使用 ContextReplacementPlugin

这个方案其实跟方案一有点像。原理是咱们告诉webpack咱们会使用到哪一个本地文件，具体作法是在插件项中这样添加ContextReplacementPlugin：

const webpack = require('webpack');
module.exports = {
  //...
  plugins: [
    // 只加载 `moment/locale/ja.js` 和 `moment/locale/it.js`
    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /ja|it/),
  ],
};
复制代码

值得注意的是，这样你就不须要在代码中再次引入本地文件了：

const moment = require('moment');
// 不须要
moment.locale('ja');
...
复制代码

体积对比

对比条件：

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

具体表现：

	文件大小	Gzipped
默认	266 kB	69 kB
使用IgnorePlugin	68.1 kB	22.6 kB
使用ContextReplacementPlugin	68.3 kB	22.6 kB

可见，处理后的体积小了不少。