Почему Webpack генерирует 2 блока на динамический импорт ()?

Question

Я начал использовать некоторые динамические операторы import(), например,

import(/* webpackChunkName: "chart" */'./Chart')

проблема в том, что Webpack генерирует 2 новых блока для этого: chart.js (который почти пуст) и vendors~chart.js (который фактически содержит все, что я ожидал в один новый кусок).

В моем конфиге нет ничего особенного. У меня есть только одна именованная запись с именем client, и это был мой единственный пакет до использования динамического запроса require. Это происходит как для разработки, так и для режима производства. Я использую Webpack вер. 4.8.1

Есть идеи, как получить всего один новый блок? Я не хочу, чтобы клиент делал 2 запроса вместо одного.

Answer 1

Я нашел два (несовершенных) способа избежать этого.

1. Если в вашем приложении есть одна запись, вы можете полностью удалить группу кэша vendors, так как эта группа поставщиков предназначенадля приложений с несколькими входами.

   optimization: {
     splitChunks: {
       cacheGroups: {
         vendors: false, // not needed for a single entry app
       },
     },
   },
   

2. вы можете использовать webpack.optimize.MinChunkSizePlugin, который соединит вас с небольшим блоком, хотя и не обязательно с наилучшим оптимизированнымопция.