gpt4 book ai didi

javascript - 使用 webpack 将 vendor 库拆分为多个 block

转载 作者:数据小太阳 更新时间:2023-10-29 04:16:47 25 4
gpt4 key购买 nike

我想将我的 vendor 代码分成两个 block ,一个包含所有 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 包含所有第 3 方库,不包括 Angular 内容
vendor.angular.bundle.js 包含所 Angular 东西和我所有已经在 vendor.bundle.js 中的第 3 方库。

有没有办法只在 vendor.angular.bundle.js 中捆绑 Angular 模块,而不自动包含其他第 3 方库?

最佳答案

想通了:

CommonsChunkPlugin 在插件数组中的顺序。

为了获得所需的“分块”,这是我必须做出的改变:

  1. 重新排序 CommonsChunkPlugins,以便 Angular block 首先。
  2. 更新下面的“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

我能够验证所有与 Angular 相关的模块现在都在 vendor.angular.bundle.js 中,所有非 Angular 模块确实在 vendor.bundle.js 中

关于javascript - 使用 webpack 将 vendor 库拆分为多个 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38534624/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com