Я собираюсь поделиться результатами сокращения времени сборки Webpack для конкретного клиентского приложения. Приложение основано на TypeScript и React. В цифрах у нас было:
- 352 файла .tsx, 96 КБ SLOC
- 22 файла css / scss
- один пакет выходных данных, 6,8 Мбайт без ошибок с исходными картами.
Первоначальная конфигурация сборки:
- webpack v2.2.1
- babel-loader + ts-loader для файлов .tsx
- плагин commons-chunk для извлечения зависимостей от поставщиков в отдельный пакет
- webpack devtool = eval-source-map.
До оптимизации в нашу сборку входило:
- 23 сек полная сборка
- Инкрементальная сборка 13s (простое изменение модуля с небольшим количеством входящих зависимостей).
Вот список реализованных нами улучшений и их влияние на время инкрементной сборки:
- замените ts-loader на awesome-typescript-loader (ATSL) -5s
- ATSL useCache = true -4 с
- webpack unsafeCache = true -0,2 с
- devtool = дешевый модуль-eval-исходная карта -0.5 с
- запаковать зависимости от вендора с помощью DllReferencePlugin -0.5s (эффект существенен для начальной сборки).
Эти улучшения сократили время инкрементальной сборки примерно до 3 секунд, но это все еще слишком много. Поэтому я решил отказаться от проверки типов для разработки и оставить ее только для сборок CI:
- Вариант ATSL transpileOnly -2с.
В результате мы потратили ~ 1 с на инкрементную сборку, что нас устроило.
Помимо этих улучшений, следующие настройки улучшили время сборки, но не были реализованы из-за различных проблем:
- многоступенчатый режим горячей замены модуля. Самый многообещающий, но, похоже, вызывает дополнительную перезагрузку, также не хватает документации.
- замените ATSL специальным сценарием для просмотра и транспиляции файлов .tsx. Увеличивает время сборки с 1 до 0,7 или даже до 0,6 с с помощью happy-pack. Но усложняет настройку среды разработки.
- PrefetchPlugin. Эффект не ясен, отсутствует документация
- замените HtmlWebpackPlugin статическим файлом HTML.
Вдобавок я пробовал вещи, которые не улучшили время сборки:
- использовать babel с ATSL
- Плагин ATSL CheckerPlugin
- понизить css-loader до 0.14
- ATSL forkChecker = true
- happy-pack с ATSL (вообще не заработало)
- Параметры isolatedModules + noResolve TS ухудшают ситуацию с ATSL.
Если кому-то интересно, я собираюсь поделиться собственным скриптом для просмотра и транспиляции .tsx в качестве стартового набора TypeScript / React / Webpack на GitHub. Пожалуйста, поделитесь своими комментариями по этому поводу.
Пусть ваши сборки будут сверхбыстрыми!