Как оптимизировать размер moment.js с помощью webpack

Webpack

Эта статья является переводом,первоисточник.

когда вы пишете в кодеvar moment = require('moment')Затем используйте webpack для его упаковки, и пакет будет намного больше, чем вы думаете, потому что запакованный результат содержит локальные файлы со всего мира.

img

Решение состоит в том, чтобы выбрать один из следующих двух плагинов webpack:

  1. IgnorePlugin
  2. ContextReplacementPlugin

Вариант 1: использоватьIgnorePluginплагин

IgnorePluginПринцип состоит в том, чтобы удалить все локальные файлы момента, потому что много раз мы вообще не будем использовать его в разработке. Плагин используется следующим образом:

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.

Вариант 2: использоватьContextReplacementPlugin

Этот план на самом деле немного похож на План 1. Принцип заключается в том, что мы сообщаем веб-пакету, какой локальный файл мы будем использовать, и конкретный метод заключается в том, чтобы добавить его вот так в элемент плагина.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
Использование плагина игнорирования 68.1 kB 22.6 kB
Использование плагина ContextReplacement 68.3 kB 22.6 kB

Видно, что обрабатываемый объем значительно меньше.

Категории