Ищите способ сохранить код вендора в блоке компонента при динамическом импорте - PullRequest
Новая
       7

Ищите способ сохранить код вендора в блоке компонента при динамическом импорте

0 голосов
/ 22 ноября 2018

У меня огромная библиотека диаграмм, которая составляет около 400 КБ, и только один компонент использует библиотеку диаграмм.Компонент загружается только при нажатии кнопки.Поэтому его даже не следует загружать при первой загрузке страницы.

Использование реагирующей загрузки для динамического импорта.

В настоящее время веб-пакет создает общий блок, например 

page1~page2~page3.js
page1~page2~page3~page4.js

Так что, когда я захожу на страницу 1, она (возможно, с реактивной загрузкой) загружает все общие блоки, хотя еще не смонтирована.Можно ли как-нибудь разделить поставщика на компоненты?Потому что другие куски работают так, как я ожидаю.Выборка при монтировании!

Оптимизация веб-пакета splitChunks 

optimization: {
splitChunks: {
  maxAsyncRequests: 20,
  maxInitialRequests: 20,
  minChunks: 2,
  chunks: 'all',
  cacheGroups: {
    styles: {
      name: 'styles',
      test: /\.css$/,
      chunks: 'all',
      enforce: true
    },
  }
}
  },

.babelrc 

{
  "presets": ["react", "es2015" , "stage-2"],
  "plugins": [
    "syntax-dynamic-import",
    ["babel-plugin-webpack-alias", {"config": "${PWD}/config/aliases/aliases.config.js"}],
    "transform-decorators-legacy",
    "transform-runtime",
    "react-loadable/babel",
    "dynamic-import-node"
  ]
}
...