1

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

假设我有一个 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其他各种页面文件之间的共享代码。

当我运行这些代码时，在 page/aaa中加载了/aaa's 文件，以及大的公共块文件。

现在最大的问题是，页面/aaa根本不需要services/B和services/C代码，但是公共块文件包含各个页面文件之间的所有共享代码。所以普通的chunk文件很大，而且有很多未使用的代码。

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

帮助

当路由到不同的页面时，我可以有其他方法只加载必要的公共块吗？

4

1 回答 1

1

这里只是同样的问题。我写了一个小测试，看起来 webpack 可以处理多个常见的块。在你的情况下，也许我们可以将 service/A、service/B 和 service/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
        } )
]
于 2016-03-07T11:53:45.413 回答