如何用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

可見，處理後的體積小了不少。