Производство

В этом руководстве мы углубимся в лучшие практики и утилиты для создания сайта или приложения для производства.

Настройка

Цели сборки разработки и производства сильно различаются. В разработке мы хотим сильную сопоставление исходного кода и сервер localhost с живым обновлением или заменой модулей в реальном времени. В производстве наши цели смещаются к фокусу на минимизированных пакетах, более легких картах исходного кода и оптимизированных активах для улучшения времени загрузки. С этой логической сепарацией в наличии, мы обычно рекомендуем писать отдельные конфигурации webpack для каждой среды.

Хотя мы разделим специфичные для производства и разработки части, мы все равно будем поддерживать общую конфигурацию, чтобы сохранить DRY-принцип. Для объединения этих конфигураций мы будем использовать утилиту под названием webpack-merge. С общей конфигурацией нам не придется дублировать код в конфигурациях, специфичных для среды.

Давайте начнем с установки webpack-merge и разделения частей, над которыми мы уже работали в предыдущих руководствах:

npm install --save-dev webpack-merge

project

  webpack-demo
  |- package.json
  |- package-lock.json
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
  |- /dist
  |- /src
    |- index.js
    |- math.js
  |- /node_modules

webpack.common.js

+ const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+ module.exports = {
+   entry: {
+     app: './src/index.js',
+   },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Production',
+     }),
+   ],
+   output: {
+     filename: '[name].bundle.js',
+     path: path.resolve(__dirname, 'dist'),
+     clean: true,
+   },
+ };

webpack.dev.js

+ const { merge } = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+   mode: 'development',
+   devtool: 'inline-source-map',
+   devServer: {
+     static: './dist',
+   },
+ });

webpack.prod.js

+ const { merge } = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+   mode: 'production',
+ });

В webpack.common.js, мы теперь настроили конфигурации entry и output и добавили необходимые плагины для обеих сред. В webpack.dev.js, мы установили mode на development. Также мы добавили рекомендуемую devtool для данной среды (сильное сопоставление исходного кода), а также нашу конфигурацию devServer. Наконец, в webpack.prod.js, mode установлено на production, что загружает TerserPlugin, который был впервые представлен в руководстве по сжатию дерева.

Обратите внимание на использование вызовов merge() в конфигурациях, специфичных для среды, для включения нашей общей конфигурации в webpack.dev.js и webpack.prod.js. Инструмент webpack-merge предлагает множество расширенных функций для слияния, но для нашего случая нам не понадобятся ни одна из них.

Сценарии NPM

Теперь давайте изменим наши сценарии npm для использования новых файлов конфигурации. Для сценария start, который выполняет webpack-dev-server, мы будем использовать webpack.dev.js, а для сценария build, который выполняет webpack для создания сборки производства, мы будем использовать webpack.prod.js.

package.json

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "src/index.js",
    "scripts": {
-     "start": "webpack serve --open",
+     "start": "webpack serve --open --config webpack.dev.js",
-     "build": "webpack"
+     "build": "webpack --config webpack.prod.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "express": "^4.15.3",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^4.30.0",
      "webpack-dev-middleware": "^1.12.0",
      "webpack-dev-server": "^2.9.1",
      "webpack-merge": "^4.1.0",
      "xml-loader": "^1.2.1"
    }
  }

Не стесняйтесь запускать эти сценарии и наблюдать за изменениями вывода по мере добавления в нашу конфигурацию производства.

Укажите режим

Многие библиотеки будут использовать переменную process.env.NODE_ENV для определения того, что должно быть включено в библиотеку. Например, когда process.env.NODE_ENV не установлено на 'production', некоторые библиотеки могут добавлять дополнительное протоколирование и тестирование, чтобы упростить отладку. Однако при process.env.NODE_ENV установлено на 'production', они могут удалять или добавлять значительные части кода, чтобы оптимизировать работу для ваших реальных пользователей. Начиная с webpack v4, указание mode автоматически настраивает process.env.NODE_ENV для вас через DefinePlugin.

webpack.prod.js

  const { merge } = require('webpack-merge');
  const common = require('./webpack.common.js');

  module.exports = merge(common, {
    mode: 'production',
  });

Если вы используете библиотеку, такую как react, вы должны увидеть значительное уменьшение размера пакета после добавления DefinePlugin. Также обратите внимание, что любой из нашего локального кода /src может использовать эту переменную, поэтому следующая проверка будет корректной:

src/index.js

  import { cube } from './math.js';
+
+ if (process.env.NODE_ENV !== 'production') {
+   console.log('Looks like we are in development mode!');
+ }

  function component() {
    const element = document.createElement('pre');

    element.innerHTML = [
      'Hello webpack!',
      '5 cubed is equal to ' + cube(5)
    ].join('\n\n');

    return element;
  }

  document.body.appendChild(component());

Минимизация

Webpack v4+ по умолчанию будет минимизировать ваш код в production mode.

Обратите внимание, что хотя TerserPlugin — отличная отправная точка для минимизации и используется по умолчанию, есть и другие варианты:

• ClosureWebpackPlugin

Если вы решите попробовать другой плагин минимизации, убедитесь, что ваш новый выбор также удаляет неиспользуемый код, как описано в руководстве по сжатию дерева, и предоставляет его в качестве optimization.minimizer.

Карты исходного кода

Мы рекомендуем включить карты исходного кода в производстве, так как они полезны для отладки и проведения тестов производительности. Тем не менее, вам следует выбрать вариант со сравнительно быстрой скоростью сборки, рекомендуемый для использования в производстве (см. devtool). В этом руководстве мы будем использовать опцию source-map в производстве по сравнению с inline-source-map, которую мы использовали в разработке:

webpack.prod.js

  const { merge } = require('webpack-merge');
  const common = require('./webpack.common.js');

  module.exports = merge(common, {
    mode: 'production',
+   devtool: 'source-map',
  });

Минимизация CSS

Минимизация CSS для производства имеет решающее значение. Пожалуйста, обратитесь к разделу Минимизация для производства.

Альтернативы CLI

Многие из описанных выше опций могут быть заданы как аргументы командной строки. Например, optimization.minimize можно задать с помощью --optimization-minimize, а mode — с помощью --mode. Запустите npx webpack --help=verbose для получения полного списка аргументов командной строки.

Хотя эти сокращенные методы полезны, мы рекомендуем устанавливать эти параметры в файле конфигурации webpack для большей настраиваемости.