Webpack v4 с несколькими записями на одной странице, чанки дублируются без необходимости

Question

У меня есть многостраничный веб-сайт с подмножеством страниц, который является SPA.Мы только что обновились до Webpack V4 и столкнулись с некоторыми новыми проблемами, с которыми мы не сталкивались ранее.

Наши страницы всегда включают тег сценария для app.build.js .Этот файл имеет глобальные начальные значения и импортирует наш открытый путь.Он импортирует такие вещи, как Modernizr и создает навигацию по нашему сайту.

Кроме того, на каждой странице мы предоставляем второй файл JS, например account.build.js .Некоторые страницы не имеют этого второго файла, если они очень просты.Для создания навигации по-прежнему нужен app.build.js.

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

Мой вопрос: как вы скажете Webpack, что app.build.js включено глобально ???Мы делаем это с помощью SplitChunks для наших поставщиков, но это соответствует импорту, а не имени входного файла.

Теперь нам также нужно import './public-path'; в каждом файле ввода, что не идеально.Я бы предпочел сделать это один раз в app.build.js и распознать его глобально.

Ошибка, поданная в Webpack здесь: https://github.com/webpack/webpack/issues/8842

Answer 1

Если вы хотите переместить все дубликаты в один файл (commons.js), оставив в стороне все файлы вендора в vendors.js, вы можете указать несколько групп кэша.commons.js будет содержать все дубликаты модулей во всех ваших точках входа.

optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      },
      commons: {
        name: 'commons',
        chunks: 'all',
        minChunks: 2,
        enforce: true,
      },
    }
  }
}