Как ускорить сборку Webpack с 30 минут до 5-10?

Question

[Никита]

Рабочий проект довольно объемный, написан на Vue + TypeScript и собирается вебпаком порядка 30-40 минут. Соответственно, при переключении ветки, создании/удалении файлов hotreload ломается и приходится опять ждать полчаса.

Есть ли способы аппаратно ускорить сборку? Пробовал ставить на SSD, пробовал на новом компьютере с мощным процессором (i7-8700), пробовал на старом (i5-4250M) - везде результат один. Есть какие-то способы уменьшить время сборки хотя бы на треть, не редактируя код?

В целом, хотелось бы узнать, на что идет нагрузка при сборке - диск, процессор, озу, еще что-то?

Comments

[Дмитрий Беляев]

Проверьте, что при сборке стили не импортят друг друга рекурсивно

[Никита]

Дмитрий Беляев, как это можно проверить? только вручную просмотреть все компоненты?
к слову, сам проект изначально нормально собирался, но потом начал разрастаться, когда пришел мой коллега, было 5 минут время сборки, теперь уже 20-30, у меня вообще все 40

Answer 1

[Никита]

Нашел решение путем анализа процесса сборки. Заметил, что некоторые файлы, которые буквально состоят из одного props, компилируются по минуте. Библиотек никаких не было, стили тоже только свои. Проблема заключалась в проверке типов TypeScript - она и компиляция файлов происходили в одном потоке.

Далее решение, если вы пользуетесь ts-loader:
Устанавливаете плагин

npm install fork-ts-checker-webpack-plugin

В webpack.config.js - регистрируете плагин, добавляете опцию transpileOnly: true к лоадеру и прописываете плагин в plugins:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = {
  module: {
    rules: [
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        transpileOnly: true
      }
    ]
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin()
  ],

Время сборки сократилось в 60 раз - с 30 минут до 30-40 секунд

Answer 2

[Антон Спирин]

Нездоровая фигня. В каких бы больших проектах не участвовал - таких цифр не видел.
Сделал билд предыдущего немаленького проекта с одной клиентской точкой входа и одной серверной(React/Typescript) на i7-4770HQ - 1 минута 45 секунд.

Comments

[Никита]

Коллега мой говорит что такая долгая сборка из-за TS и его многочисленных проверок и описаний

[Антон Спирин]

Никита, ваш коллега явно темнит или, возможно, сам что-то не до конца понимает. Новый проект, который пока в разработке, собирается за 12 секунд.
И это мы еще не используем awesome-typescript-loader, который поддерживает потоки и ускоряет сборку, во всех проектах стандартный.

Если хотите, можете сбросить конфиг посмотреть.

[Никита]

Антон Спирин, подключил аналайзер, в итоге получилось вот что

[Никита]

Антон Спирин, размер бандла сравнительно небольшой, а вот время этот аналайзер не показывает. Может есть какие нибудь инструменты которые показывают именно временные затраты?

[Антон Спирин]

Никита, webpack-bundle-analyzer работает по socket соединению, я не могу посмотреть, что он вам показал. Можете просто скриншот прислать.
По поводу времени webpack выводит время сборки в миллисекундах в консоль. Смотрите внимательно.

[Никита]

Антон Спирин, https://prnt.sc/o4cxan
суммарный размер 7.32мб

[Антон Спирин]

Никита, ну навскидку видно, что можно оптимизировать lodash.
Замените все импорты lodash вида:
import { debounce } from 'lodash';
на:
import debounce from 'lodash/debounce';

И так оптимизировать можно многие библиотеки. Тот же date-fns. Обязательно сделайте это.

А почему у вас так много чанков? У вас используется lazy-loading?

[Никита]

Антон Спирин, завтра попробуем оптимизировать библиотеки. Да, чанки все прописаны в файле роутера, и используется ленивая загрузка