Question

多个块中的重复代码或sooooo大公共块文件

假设我有一个SPA网站。我有一个文件main.js，我在其中配置路由。

```js
define(function(){
  // suppose I define route here
  route.when('#/aaa', function(){
    // a code split point
    require([
      'services/A',
      'style/a',
      'module/a'
    ])
  }).when('#/bbb', function(){
    // a code split point
    require([
      'services/A',
      'services/B',
      'style/b',
      'module/b'
    ])
  }).when('#/ccc', function(){
    // a code split point
    require([
      'services/B',
      'serivces/C',
      'style/c',
      'module/c'
    ])
  }).when('#/ddd', function(){
    // a code split point
    require([
      'services/A',
      'serivces/C',
      'style/d',
      'module/d'
    ])
  })// and has many route configs like this
});
```

我使用webpack捆绑代码。我的webpack.config.js喜欢这个

```js
module.exports = {
  entry: {
    main: path.resolve(__dirname, 'main.js')
  },
  output: {
    path: path.resolve(__dirname),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'main',
      async: true
    })
  ]
}
```

当我运行webpack时，各个块都有重复的services/A services/B等代码。这不是我想要的。

我阅读了webpack文档，然后将minChunks: 2选项添加到CommonsChunkPlugin。

然后我再次运行webpack。

现在，每个块只有自己的代码。但我也得到一个大公共块文件，其中包括 services/A，services/B，services/C以及各种页面文件之间的其他共享代码。

当我运行这些代码时，在页面/aaa中加载了/aaa个文件，以及大型公共块文件。

现在最大的问题是，页面/aaa根本不需要services/B和services/C代码，但常见的块文件包含各种页面文件之间的所有共享代码。因此，常见的块文件非常庞大，并且有许多未使用的代码。

我知道我可以将minChunks设置为更大的数字，但这样，每个页面文件都可能会有重复的代码。

帮助

我可以使用其他方法在路由到不同页面时仅加载必要的公共块吗？

Answer 1

这里也是同样的问题。我写了一个小测试，看起来webpack可以处理多个常见的块。在你的情况下，也许我们可以将服务/ A，服务/ B和服务/ C中的常见块保存到service / common.js中，其他常见的块仍然会进入common.js，试试这个：

plugins : [
//common chunks from A/B/C go into service/common.js 
new CommonsChunkPlugin(( {
            name : 'service/common',
            minChunks : 2,
            chunks : [ 'service/A', 'service/B', 'sevice/C' ]
        })),
        //this common pkg holds all the other common chunks; and in my test, 
//it MUST comes out in the last of this array 
        new CommonsChunkPlugin( {
            name : 'common.js',
            minChunks : 2
        } )
]

webpack重复多个代码中的代码和sooooo大公共块文件

多个块中的重复代码或sooooo大公共块文件

帮助

1 个答案: