In the case of code-spliting，babel-plugin-import leads to commonChunks unnormal

[yesuanzao]

Environment

• antd version: 1.11.6
• OS and its version: mac
• Browser and its version: chrome
• webpack: 2.2.1

problem

I'm using code-spliting, I expect antd will be bundled to commonChunks instead of everywhere

"plugins": [
   ["import", { "libraryName": "antd", "style": true}]
]

new webpack.optimize.CommonsChunkPlugin({
  name: 'vender',
  children: true,
  minChunks: 2,
  async: true
}),

in the condition of babel-plugin-import，

not babel-plugin-import，

Compare two parts, the latter meets expectations. Antd has been bundled to main.js instead of other chunks. so what is wrong with the babel-plugin-import?

[nalantianyi]

u can try webpack2+system.import instead of require.ensure.but if u use CommonsChunkPlugin and ExtractTextPlugin to bundle that will have a problem with antd's styles.so i use style-loader.

[hpcplus2]

不知道是否是ExtractTextPlugin的使用问题，我在切片之后也碰到了这样的问题，所有的chunk文件内都重复包含了页面中使用的antd组件样式 ExtractTextPlugin有个配置项是allChunk, 官方说明: Extract from all additional chunks too (by default it extracts only from the initial chunk(s)) 我当时通过设置new ExtractTextPlugin('common.css', { allChunks: true });解决了这个问题

[dickeylth]

@yesuanzao I've encounted the same problem, seems to be an issue with CommonTrunksPlugin & code splitting: https://github.com/webpack/webpack/issues/1807#issuecomment-167517162:

The CommonsChunkPlugin is only meant to be used on entry chunks.

我也遇到了同样的问题，似乎跟 CommonTrunksPlugin 和 代码切片不兼容有关。

[dickeylth]

@nalantianyi webpack 2 now recommends using import() over System.import(): https://webpack.js.org/guides/code-splitting-import/#system-import-is-deprecated

[yesuanzao]

@dickeylth 我不认为是这个问题，在我的第二张图中，没有使用babel-plugin-import，而是全部引入antd，打包结果是符合预期的。 @hpcplus2 你提到的是样式部分，但这里是js代码重复打包在各个chunk中。

[dickeylth]

Are we making any progress on this issue?

[Vibing]

我也遇到这个问题。 这个问题就这样没结果了？

[roc916]

同遇到这个问题了。。有解决方案吗？

[lwyj123]

同样遇到了这个问题

[z-wings]

有进度了么

[wmzy]

这个问题是 CommonsChunkPlugin 插件的问题,和 babel-plugin-import 插件无关. 下面的配置可以把异步模块里的公共模块提取到父模块里(我还没有找到提取到单独chunk里的方案).

{
  entry: {
    client: ['babel-polyfill', './src/client.js']
  },
  // ......
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'client', // same with entry key
      children: true,
      deepChildren: true,
      async: true,
      minChunks: module =>
        /node_modules/.test(module.resource) &&
        !/@dev\/chaos-fe-module/.test(module.resource)
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    }),
  ]
  // ......
}