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

Question

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

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

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

Мой конфиг не имеет ничего особенного. У меня есть только одна названная запись называется client и это был мой единственный пакет перед использованием динамического требования. Это происходит как для разработки, так и для режима производства. Я использую 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 это объединит вас в небольшой кусок, хотя и не обязательно с наилучшим оптимизированным вариантом.