webpack

Оптимизация времени сборки Webpack

По мере увеличения кодовой базы приложения его сборка становится всё более медленной. Другими словами, при большом количестве файлов и кода, Webpack теряет в скорости работы. В таких случаях на помощь приходит Webpack DLL, плагин, который позволяют разделить проект на несколько бандлов, каждый из которых будет собираться независимо. Да, DLL, прямо как в винде.

К примеру, вы используете в проекте несколько больших библиотек или фреймворков, таких как Jquery, Angular или React, которые изменяются сравнительно редко, либо внешние утилиты, такие как underscore или lodash. DLL  плагин позволяет собрать ваши утилиты в один бандл, фреймворки в другой, а ваш проект в третий. Таким образом фреймворки с утилитами не будут пересобираться каждый раз, а просто будут браться из уже собранного бандла. А непосредственно файлы вашей логики напротив, будут каждый раз упаковываться в свой бандл, в котором будет только ваш код и логика, без внешних либ. За счёт этого и достигается ускорение.

Вы компилируете ваши внешние библиотеки один раз, а затем запуская wepback в —watch режиме можете пересобирать только пакеты вашего приложения. Поскольку бандл приложения становится меньше, как правило, начальная и последующие сборки будут быстрее.

Для настройки Dll создаются две webpack конфигурации, одна из которых создает пакет библиотеки, а вторая создает пакет приложения, которое использует код из библиотек.

Сборка DLL

Самый простой способ, это создать js файл, который подключает все необходимые внешние библиотеки. Например, пусть это будет vendors.js

Далее необходимо создать файл конфигурации Webpack:

После запуска webpack —config=webpack.dll.js , в директории dist,  появится файл манифеста и бандл.

Если открыть бандл, то он выглядит примерно так:

А файл JSON манифеста содержит след. структуру:

Таким образом, через  window.vendors_lib (<идентификатор>) может быть использован любая биб-ка на странице из этого бандла.

По идентификатору модуля в бандле через JSON манифест можно определить путь к файлу модуля.

Сборка проекта

В конфиге проекта мы добавили DllReferencePlugin ссылающийся на полученный ранее манифест.

Теперь на вашей html странице необходимо добавить ссылки на оба пакета, но пакет с dll должен быть первым. На этом настройка Dll завершена.

Для удобства можем добавить в package.json несколько простых команд, которые будут помогать нам в сборке.

Если есть какие-то мысли или вопросы, не стесняйтесь — оставляйте комментарии.

Также можно почитать: