Обновление до Webpack 2 и потрясающие результаты

Недавно сделал обновление до Webpack 2, потому что мне нужна была функция встряхивания дерева. Прошло около суток. Вот несколько советов и результаты.

Что такое "встряхивание деревьев"?

Встряхивание дерева (популяризованное Rollup) - это устранение неиспользуемого экспорта.

К сожалению, Tree Shaking в Webpack 2, похоже, не устраняет неиспользуемый экспорт внутри пакетов - по крайней мере, в моем проекте (например, все функции Lodash включены в мой пакет, включая функции, которые я не использую).

Обновление до Webpack 2

Официальное руководство по миграции Webpack довольно исчерпывающее, поэтому я не буду тратить время на то, чтобы повторять то, что уже есть.

В предустановке es2015 .babelrc отключите модули

До:

"presets": ["es2015", "react"],

После:

"presets": [
  ["es2015", {"loose": true, "modules": false}],
  "react"
]

Это уменьшит размер файла вашего выведенного JS.

Убедитесь, что вы не включаете плагин Babel «react-hot-loader / babel» в ваш .babelrc файл!

Встряхивание дерева не сработает, если будет добавлен этот плагин (потратил на это много времени).

Отключение .babelrc и импорт собственной конфигурации в Webpack (НЕОБЯЗАТЕЛЬНО)

Измените раздел «babel-loader» в файле конфигурации Webpack, чтобы он выглядел следующим образом (где .babelrc.js - это JS-файл, содержащий вашу конфигурацию .babelrc)

module: {
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: Object.assign({ babelrc: false }, require('./babelrc.js'))
      },
      exclude: /node_modules/,
    },
  ]
}

Игнорируйте предупреждение

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

(node:35513) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

Просто проигнорируйте это, это проблема с одним из ваших загрузчиков Webpack и не имеет к вам никакого отношения (похоже, что Webpack отключит это предупреждение в будущем обновлении).

Результаты

Webpack 1.13.2

Version: webpack 1.13.2
Time: 25305ms
                                        Asset       Size  Chunks             Chunk Names
     js/contact_e752e5854d7a6f7422c9.chunk.js    1.43 kB       4  [emitted]  contact
                          chunk-manifest.json  274 bytes          [emitted]
     js/catalog_d3fe90090a995c7254ef.chunk.js    41.9 kB       1  [emitted]  catalog
         js/how_63fabed843b4144effd8.chunk.js    1.35 kB       2  [emitted]  how
     js/finance_7ae1304d69a4e204bd20.chunk.js    1.56 kB       3  [emitted]  finance
     js/vendor_876e13b789b38023cf83.bundle.js     394 kB       0  [emitted]  vendor
       js/about_467405304c50e28a9c63.chunk.js    1.44 kB       5  [emitted]  about
       js/main_d6bdb9cbe29bc1a164e5.bundle.js     342 kB       6  [emitted]  main
css/main_19b822f00587cc2e781c3bbe6bc852f3.css     205 kB       6  [emitted]  main
                                manifest.json  467 bytes          [emitted]
                                sw-toolbox.js    17.4 kB          [emitted]
   [0] multi vendor 136 bytes {0} [built]
    + 851 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules

Webpack 2.2.1

Version: webpack 2.2.1
Time: 22533ms
                                        Asset       Size  Chunks                    Chunk Names
       js/about_489704d5cc668862b9be.chunk.js    40.1 kB       0  [emitted]         about
       js/main_ba108242d5c525cd6d9d.bundle.js     325 kB       1  [emitted]  [big]  main
                          chunk-manifest.json   90 bytes          [emitted]
     js/vendor_a9ebdde44b1b55d21147.bundle.js     396 kB       2  [emitted]  [big]  vendor
css/main_70a9bee7273fab9ef275864d6bda5aca.css     205 kB       1  [emitted]         main
                                manifest.json  235 bytes          [emitted]
                                sw-toolbox.js    17.4 kB          [emitted]
   [1] ./~/react/react.js 56 bytes {2} [built]
  [18] ./~/react-redux/lib/index.js 475 bytes {2} [built]
  [42] ./~/lodash/lodash.js 527 kB {2} [built]
  [61] ./~/react-router/lib/index.js 3.62 kB {2} [built]
  [72] ./~/react-helmet/lib/Helmet.js 23.4 kB {2} [built]
  [89] ./src/modules/analytics/AnalyticsLib.js 1.54 kB {1} [built]
 [102] ./~/redux/es/index.js 1.08 kB {2} [built]
 [103] ./~/react-dom/index.js 63 bytes {2} [built]
 [134] ./~/react-router-scroll/lib/index.js 512 bytes {2} [built]
 [206] ./src/client/Device.js 856 bytes {1} [built]
 [207] ./~/history/lib/createBrowserHistory.js 3.38 kB {2} [built]
 [208] ./~/redux-thunk/lib/index.js 529 bytes {2} [built]
 [320] ./src/optimizely/client/index.js 464 bytes {1} [built]
 [840] ./src/client.js 3.36 kB {1} [built]
 [841] multi babel-polyfill lodash react react-dom react-helmet redux redux-thunk react-redux react-router react-router-scroll 136 bytes {2} [built]
    + 853 hidden modules
Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built]
       [1] ./~/base64-js/index.js 3.48 kB {0} [built]
       [2] ./~/buffer/index.js 48.6 kB {0} [built]
       [3] ./~/ieee754/index.js 2.05 kB {0} [built]
       [4] ./~/isarray/index.js 132 bytes {0} [built]
       [5] (webpack)/buildin/global.js 509 bytes {0} [built]
       [6] ./~/css-loader!./~/postcss-loader!./~/sass-loader/lib/loader.js!./src/style/index.scss 205 kB {0} [built]

main.js увеличился с 342 КБ до 325 КБ, что на 5% меньше размера файла. Не совсем радикально, но я возьмусь за это.

Обратите внимание, что размер about.js увеличился с 1,44 кБ до 40,1 кБ, а количество фрагментов было уменьшено. Это связано с тем, что, по-видимому, minChunkSizePlugin, у которого minChunkSize = 50000 (50 КБ), раньше не работал по какой-либо причине. Крошечные блоки размером 2 КБ были удалены и объединены в about.js.

Но если вам было любопытно, что будет на выходе Webpack 2.0 с отключенным minChunks, вот он:

Version: webpack 2.2.1
Time: 21718ms
                                        Asset       Size  Chunks                    Chunk Names
       js/main_ba108242d5c525cd6d9d.bundle.js     325 kB       5  [emitted]  [big]  main
     js/catalog_bef2c4168fd2a654ff5c.chunk.js      36 kB       0  [emitted]         catalog
     js/finance_aa3df57fc02b5cf34182.chunk.js    1.16 kB       2  [emitted]         finance
     js/contact_d26e17e05dadd81271dc.chunk.js    1.04 kB       3  [emitted]         contact
       js/about_21fe64e0b5fde043e86d.chunk.js    1.05 kB       4  [emitted]         about
         js/how_1d3b0d4332d795dd1fa3.chunk.js  968 bytes       1  [emitted]         how
                          chunk-manifest.json  274 bytes          [emitted]
     js/vendor_a9ebdde44b1b55d21147.bundle.js     396 kB       6  [emitted]  [big]  vendor
css/main_70a9bee7273fab9ef275864d6bda5aca.css     205 kB       5  [emitted]         main
                                manifest.json  467 bytes          [emitted]
                                sw-toolbox.js    17.4 kB          [emitted]

(Я бы сделал таблицу для сравнения размеров файлов, но Medium не позволяет создавать таблицы ... Я знаю, это безумие)

Catalog.js увеличился с 41,9 КБ до 36 КБ, что на 14% меньше.

В целом мы увидели небольшое уменьшение размера файла, но ничего особенного. При этом наш сайт очень маленький. Если бы он был больше, то уменьшение размера файла было бы более значительным.

Стоило ли это усилий и альтернативных затрат на обновление? С точки зрения бизнеса, наверное, нет. Но, по крайней мере, я получил это сообщение в блоге.