Блог

Главная - Вопросы по программированию - Как определить, почему сборка Webpack 5 идет медленно? (Большой файл пакета)

Как определить, почему сборка Webpack 5 идет медленно? (Большой файл пакета)

#webpack #webpack-5

Вопрос:

У меня возникли проблемы с Webpack 5, требующим много времени (5-8 секунд) для инкрементной сборки при любом изменении исходного файла. Это было первоначально перенесено из Webpack 4.

Раздел вывода файла webpack выглядит следующим образом:

   output: {
    path: __dirname,
    filename: `static/js/[name]/bundle.${hashVal}.js`,
    chunkFilename: `static/js/${bundleName}/chunks/[id].${hashVal}.js`,
    publicPath: "/",
  },
  optimization: {
    splitChunks: {
      chunks: "async",
    },
    minimizer: ["...", new CssMinimizerPlugin()],
  },

Некоторые замечания:

  • У меня есть отдельный файл генерации поставщиков, который генерирует большинство вещей из node_modules.
  • Основной точкой входа является большой файл (37 МБ). Похоже, что он переписывается с каждым постепенным изменением.
  • Создается множество отдельных фрагментарных файлов (похоже, примерно по одному на инструкцию импорта).
  • splitChunks.chunks с all не влияет на скорость вывода
  • Я попытался отключить плагин mini-css-extract. Это не имело значения в скорости
  • Я попытался создать несколько групп кэша для менее измененных разделов кода. Это не имело никакого значения для скорости.
  • Я использую Babel для преобразования кода
  • Плагин измерения скорости показывает, что все плагины занимают очень мало времени ( (Я удалил «…» из вашей конфигурации CSS-минимайзера, чтобы заставить это работать)

Моя главная проблема заключается в том, что, похоже, основной файл пакета всегда восстанавливается. Я сравнил файлы, и они всегда одни и те же, поэтому я не уверен, почему он создал новый.

Я не знаю, как понять, что происходит так долго, и как это исправить.

Метки: ,