使用 webpack 将供应商库拆分为多个块

Posted 2023-03-08

【中文标题】使用 webpack 将供应商库拆分为多个块

【英文标题】：Split vendor libraries into multiple chunks with webpack

【发布时间】：2016-11-26 20:09:50

【问题描述】：

我想将我的供应商代码分成两块，一个包含所有 Angular 库，另一个包含其他所有内容。

我的 Angular 应用程序只有一个入口点，并且设置如下：

entry: 
    app: './path_to/app.js',
    vendor: ['jquery', 'moment', 'numeral'],
    'vendor.angular': ['angular', 'angular-route', 'angular-numeraljs']

然后我使用 CommonsChunkPlugin 来配置另外两个包：

new webpack.optimize.CommonsChunkPlugin(
    name: 'vendor',
    chunks: ['app'],
    warnings: false,
    filename: 'vendor.bundle.js'
)
new webpack.optimize.CommonsChunkPlugin(
    name: 'vendor.angular',
    chunks: ['app'],
    warnings: false,
    filename: 'vendor.angular.bundle.js'
)

这会生成 3 个文件：

Version: webpack 1.13.1
Time: 12719ms
                   Asset     Size  Chunks             Chunk Names
           app.bundle.js  19.2 kB       0  [emitted]  app
        vendor.bundle.js   484 kB       1  [emitted]  vendor
vendor.angular.bundle.js   652 kB       2  [emitted]  vendor.angular
   [0] multi vendor.angular 124 bytes 2 [built]
   [0] multi vendor 88 bytes 1 [built]
    + 124 hidden modules

app.bundle.js 仅包含我的应用代码。 vendor.bundle.js 包含所有 3rd 方库，不包括 Angular 的东西 vendor.angular.bundle.js 包含所有有角度的东西和我所有已经在 vendor.bundle.js 中的第 3 方库。

是否有只是将角度模块捆绑在 vendor.angular.bundle.js 中，而不自动包含其他 3rd 方库？

【问题讨论】：

如果你调用块 angular_stuff 而不是 vendor.angular 会发生什么？ ...这只是一种预感，但也许点符号导致 webpack 包含供应商的东西。

@andzep 不行，试过了。大小没有区别。

另外，查看文档。 CommonsChunkPlugin minChunks: Infinity 中有一个选项，其目的是：with more entries, this ensures that no other module goes into the vendor chunk ...所以也许这是缺少的选项。

...好吧，最后一个想法...如果您更改CommonsChunkPlugin-blocks的顺序...它会改变文件大小吗？...可能是因为第一个优化的公共块有'app'-chunk，然后第二个自动包含第一个。

也许可以尝试这个插件来进行缩小过程：webpack.optimize.UglifyJsPlugin .... 对多次试验和错误感到抱歉 :-).... 好的，我会离开一段时间。同时祝你好运。

【参考方案1】：

想通了：

CommonsChunkPlugin 的事在 plugins 数组中的顺序。

要获得所需的“分块”，我必须进行以下更改：

对 CommonsChunkPlugins 重新排序，以便角块 首先。 更新下面的“vendor”配置以在“chunks”数组中使用“vendor.angular”。

更新后的 CommonsChunkPlugins 现在看起来像：

new webpack.optimize.CommonsChunkPlugin(
    name: 'vendor.angular',
    chunks: ['app'],
    warnings: false,
    filename: 'vendor.angular.bundle.js'
)
new webpack.optimize.CommonsChunkPlugin(
    name: 'vendor',
    chunks: ['vendor.angular'],
    warnings: false,
    filename: 'vendor.bundle.js'
)

以上现在产生：

Version: webpack 1.13.1
Time: 7451ms
                   Asset     Size  Chunks             Chunk Names
           app.bundle.js  19.2 kB       0  [emitted]  app
        vendor.bundle.js   484 kB       1  [emitted]  vendor
vendor.angular.bundle.js   221 kB       2  [emitted]  vendor.angular
   [0] multi vendor.angular 124 bytes 2 [built]
   [0] multi vendor 88 bytes 1 [built]
    + 124 hidden modules

跑步：

webpack --progress --display-modules --display-chunks -v

我能够验证所有与角度相关的模块现在都在 vendor.angular.bundle.js 中，并且所有非角度模块确实在 vendor.bundle.js 中