Webpack-React Router V4-代码将异步模块中的重复模块拆分 [英] Webpack - React Router V4 - code splitting duplicate modules in async chunks

问题描述

主要问题是在使用react-routerV4和Webpack 2进行代码拆分时，我有几个模块，这些模块我无法到达主要模块。

The main problem is while code splitting with react-routerV4 and then webpack 2, I have modules that are in several chunks that I can't get to the main one.

我的配置如下：

• Webpack 2.2.1


• 反应路线4.1 .1

我使用的代码拆分与react-router v4 文档

I'm using the code splitting as in the react-router v4 documentation

基本上，我不使用导入，但是在路由配置上，我有这样的东西：

Basically, I don't use the import, but on the route configuration I have : something like this :

import loadHome from 'bundle-loader?lazy&name=home-chunk!./pages/market/Home';
[
  {
    path: url1,
    component: props => <Bundle load={loadHome}>{Home => <Home {...props} />}</Bundle>,
    exact: true,
  },
  // other routes
  ]

这与代码拆分完全一样，我为每条路由都获得了一个捆绑包，为node_modules获得了另一个捆绑包，我可以

This works totally fine with the code splitting and I get a bundle for each route and another bundle for the node_modules that I can later split.

我的问题是，我有一个node_module（反应光滑），分为几捆。所以我想把它放在主捆绑包中。

My problem is, I have one node_module (react-slick) that is in several bundles. So I want to get it out in the main bundle.

我的webpack配置是：

My webpack configuration is :

module.exports = {
  entry: [
    'whatwg-fetch',
    './src/scripts/index.js',
  ],
  output: {
    path: path.resolve(__dirname, 'src/build'),
    publicPath: '/build/',
    chunkFilename: "[name].js?[hash]",
    filename: '[name].js',
  },
  plugins: [
    new BundleAnalyzerPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': '"production"'
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['4_node-modules'],
      minChunks(module) {
       const context = module.context;
       return context && context.indexOf('node_modules') >= 0;
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['3_react'],
      chunks: ['4_node-modules'],
      minChunks(module) {
        return module.context && /.*\/react.*/.test(module.context);
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
        children: true,
        minChunks: 2,
    }),
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true,
    }),
    new HtmlWebpackPlugin({
      filename: '../index.prod.html',
      template: 'src/template.index.prod.html',
      inject: false,
      hash: true,
    }),
  ],
};

根据文档，这应该可以解决问题：

According to the documentation, this should do the trick :

new webpack.optimize.CommonsChunkPlugin({
    children: true,
    minChunks: 2,
}),

但是什么也没发生，我仍然在3个捆绑包中有 reactive-slick。

But nothing happens, I still have "react-slick" in 3 of my bundles.

有人能暗示发生了什么吗？

Does anyone have an hint of what's going on ?

任何帮助都值得赞赏：)谢谢！

Any help is appreciated :) Thank you !

推荐答案

我终于找到了解决方案;）

And I finally got the solution ;)

我让它这样做可能对某人有所帮助。

I let this so it might help someone.

答案是：
不指定块显然不是针对所有块，而是仅针对最后一个创建的块。

The answer is : Not specifying chunk doesn't apparently target all the chunks but only the last one created.

因此，假设我们使用react-router V4创建了2个异步块 home-chunk和 welcome-chunk。
删除常见块的方法是在webpack配置文件中添加（在插件中）：

So let's say with react-router V4 we've created 2 async chunks 'home-chunk' and 'welcome-chunk'. The way to get the common chunks out of it is to add in the webpack config file (in the pluggins):

new webpack.optimize.CommonsChunkPlugin( {
  name : 'common',
  chunks : ['home-chunk', 'welcome-chunk'],
  minChunks : 2,
}),

这将检查异步块中是否有通用模块，如果有，将它们放在通用块中。

This will check if there is common modules in the async chunks and if so, put them in the common chunk.

这篇关于Webpack-React Router V4-代码将异步模块中的重复模块拆分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！