react-router使用webpack的require.ensure动态加载问题

[flicker85]

react-router使用webpack的require.ensure动态加载子页面模块,
比如首页里有A,B,C 3个链接, 点链接会通过require.ensure动态加载相应的子页面模块,
假如A,B,C三个页面中都引用了antd里的Button组件, 通过webpack打包时候,A,B,C会生成3个js文件,
1.chunk.js, 2.chunk.js, 3.chunk.js,
在这3个打包文件里,都会有重复的antd的Button组件的代码,
请问有什么办法能把重复的代码提取出来么?
CommonsChunkPlugin可以提取entry中指定文件的公共代码,
可是像这种通过require.ensure动态加载的应该如何提取呢?

[afc163]

好像和 antd 没关系...建议搜索或到更对口的地方提问，以获得更专业的回答。

[sethzhao]

遇到相同问题，请问找到解决方案了吗？

[flicker85]

module.exports = {
entry: {
    app: path.resolve(APP_PATH, 'entry/index.jsx'),
    vendor: [
      'react',
      'react-dom',
      'react-router'
    ],
    antd: [
      'antd/lib/button',
      'antd/lib/icon'
    ]
  },
  output: {
    path: BUILD_PATH,
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].chunk.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['antd', 'vendor'],
      minChunks: Infinity
    })
  ]
}

[blade254353074]

@flicker85 很赞，用这种方法可以解决按需加载模块过大问题，主要是 antd/lib/table 占得多

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.