寻找在动态导入时将供应商代码保留在组件块中的方法

Question

我有一个巨大的图表库，大约400kb，只有一个组件使用图表库。该组件仅在按钮单击事件时加载。因此，初次加载页面时甚至不应该加载它。

使用react-loadable进行动态导入。

当前行为是webpack创建共享块，例如

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

因此，当我访问page1时，它（可能尚未加载）会加载所有共享块，即使尚未堆砌也是如此。 有什么办法可以将供应商的组件分块吗？因为其他块的工作方式像我期望的那样。正在挂载中！

设置Webpack优化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"
  ]
}