Я собираюсь поделиться результатами сокращения времени сборки 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. Пожалуйста, поделитесь своими комментариями по этому поводу.

Пусть ваши сборки будут сверхбыстрыми!