Часто возникает вопрос, как повысить производительность наших веб-приложений. Я привык думать, что мы всегда должны начинать с нуля и копаться в том, что может привести к замедлению работы нашего приложения. В этой статье мы поговорим конкретно о производительности сборки Webpack.
Есть два режима, в которых мы обычно работаем
- Режим разработки
- Режим производства
Каждый из этих режимов имеет свои собственные потребности, поэтому, например, очень часто мы используем горячую перезагрузку webpack в режиме разработки, чтобы избежать повторного развертывания сервера приложения каждый раз, когда мы что-то меняем в кодовой базе. Кроме того, очень часто мы минимизируем наши ресурсы только в производственной среде, поскольку нам может потребоваться возможность отладки наших приложений в режиме разработки.
Большая часть этих функций обеспечивается плагинами, что является одной из самых важных вещей, которые нам принес Webpack, поскольку они обеспечивают расширяемость основных функций Webpack, и очень важно знать, что мы можем делать с каждым плагином.
Говоря о производительности webpack, можно выделить несколько основных моментов.
- Кешируйте свои модули
- Разделите свой код на две части: поставщик и приложение
Кешируйте свои модули
Это что-то очень очевидное и используется не только внутри сборки. Кэш - одна из первых вещей, которые приходят в голову, когда мы пытаемся улучшить производительность любого приложения, и это делается не только при сборке.
Есть несколько вариантов кэширования ваших модулей
- HardSourceWebpackPlugin
- Официальная документация по кешированию
Это решит некоторые проблемы вашего приложения после первой сборки, однако я не буду останавливаться на этом подходе.
Webpack DllPlugin
Термин DLL означает динамически связанная библиотека и представляет собой функцию Windows, которая используется для оптимизации времени сборки и улучшения кэширования для пользователей путем выделения редко используемого кода в отдельные пакеты.
Этот подход предлагает разделить код на две части:
- Продавец
- Применение
Поставщик будет иметь код, принадлежащий библиотекам, которые не будут слишком сильно меняться со временем, например React, Redux, Moment, Lodash. Действительно, вы ожидаете, что этот код будет меняться не очень часто.
Приложение будет содержать код, написанный вами / вашей командой.
Таким образом, код, который изменяется чаще, будет отделен от кода, который не изменяется. Это улучшит время сборки и кеширования. Поэтому я не остановился на первом подходе.
Как описано в официальной документации Webpack:
DllPluginиDllReferencePluginпредоставляют средства для разделения пакетов таким образом, чтобы значительно улучшить производительность во время сборки.
Я буду использовать этот React Boilerplate, очень простое приложение для реагирования, которое использует следующие библиотеки:
- Реагировать
- Redux
- Redux-Saga
- Момент
- Лодаш
Настройка DllPlugin и DllReferencePlugin состоит из двух этапов.
- Создайте файл webpack.vendor.config.js для DllPlugin
- Ссылка на файл поставщика из вашего webpack.config.js с помощью DllReferencePlugin
Создать файл поставщика
Этот файл будет содержать небольшую конфигурацию для компиляции библиотек поставщика.
Самое главное здесь - это точка входа. Слово vendor при желании может иметь другое имя и будет содержать массив с именами библиотек, на которые есть ссылки в файле package.json.
Результатом этой сборки веб-пакета будет файл с именем vendor.build.js и файл с именем vendor-manifest.json.
Как пояснил Роберт Кингт в своей статье:
Эта сборка генерирует манифест JSON, который представляет собой сопоставление между путями к файлам модулей внутри пакета и целочисленными идентификаторами, которые были назначены каждому модулю. Этот манифест используется пакетами приложений, чтобы определить, предоставляет ли пакет библиотеки конкретный модуль, и если да, то как получить к нему доступ из другого пакета.
Файл, который будет импортирован в ваш html, будет vendor_lib.js, и его имя настроено в output ['library']. В данном случае мы выбрали [name] _bundle.js.
Опять же, имена файлов можно выбирать по своему усмотрению.
Ссылка на файл поставщика
Из вашего файла webpack.config.js вы должны указать недавно созданный файл vendor-manifest.json.
Как видите, в строках 27–30 я включил DllReferencePlugin. В этом нет никакого волшебства.
Результаты
Время сборки сокращено почти вдвое, как вы можете видеть на изображениях ниже.
Если изображения нечеткие, сборка без DllPlugin заняла 10,5 секунды, а сборка с DllPlugin заняла 6,4 секунды.
Если учесть, что это очень маленькое приложение, улучшение было очень хорошим. Подумайте о сокращении времени сборки с 30 секунд до 10–15.
Полную конфигурацию вендора можно найти здесь, а производственную сборку - здесь.
использованная литература
Спасибо и надеюсь, что это поможет! :)
