Медленная сборка Vue проекта. Какие есть способы чтоб ее ускорить?

Question

[bormor]

Есть легаси проект на VueJS.
Hot Reloading после обновления кода срабатывает крайне медленно (7-12 секунд).

Как можно ускористь сборку?
Какие есть инструменты профилирования, чтобы найти узкое место?
Как нагуглить решения?

Конфиг webpack стандартный для vue cli, c небольшими настройками:

module.exports = {
  productionSourceMap: false,
  runtimeCompiler: true,
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config.devtool = 'source-map'
    }
  },
  chainWebpack: config => {
    // Use file loader for documents (currently, PDF)
    config.module
      .rule('documents')
      .test(/\.pdf$/)
      .use('file-loader')
      .loader('file-loader')
      .end()
  }
}

Comments

[profesor08]

Без самого проекта никто ничего вразумительного и не капитанского не скажет.

Answer 1

[Антон Антон]

node_modules в отдельном чанке? роуты в отдельных чанках?

Answer 2

[Владимир Коротенко]

Ram disk, а 4-7 секунд у меня например бандл собирается.

Answer 3

[profesor08]

Без самого проекта никто ничего вразумительного и не капитанского не скажет. Может у тебя babel в dev режиме пять раз все перебирает с минификатором поочередно.

Comments

[bormor]

Логично. Добавил vue конфиг с webpack.

[profesor08]

bormor, в конфиге нет ничего подозрительного, значит надо смотреть как ты работаешь с модулями, как их подключаешь. В консоли обычно пишется какой этап компиляции, посмотри на каком долго висит. У меня был случай, когда много модулей зависили от scss переменных, там была жесть.

[bormor]

SCSS кстати тоже в проекте есть. На что-то кроме переменных стоит обратить внимание?

В случае этого проекта больше всего времени идет на генерацию sourcemap.
На этот этапе зависает секунд на 5-8

[profesor08]

bormor, переменные не при чем, смотреть надо на зависимости

[Robur]

bormor, выключите сорс-мапы, сравните.
Прочитайте все тут: https://webpack.js.org/guides/build-performance/
потом тут: https://webpack.js.org/api/cli/#profiling
потом сделайте как во второй ссылке и посмотрите где у вас реально затык.

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

[bormor]

Robur, Спасибо за содержательный ответ.