我正在构建一个角度应用,其中包含一个依赖于node_modules
中的库的单个组件。我想专门为依赖创建一个块,以便我的用户能够缓存它,因为组件可能会定期更改,但依赖关系只会每隔几周更新一次(只要它有更新)。
我在我的webpack配置中尝试了各种拆分,它总是在一个块中导致所有node_modules
,或者在一个块中导致组件及其依赖关系。
有没有办法将webpack配置为始终将供应商拆分为自己的块,如果它最初没有加载?
答案 0 :(得分:1)
我使用以下配置实现了预期的效果:
optimization: {
splitChunks: {
cacheGroups: {
initVendors: {
chunks: 'initial',
test: /[\\/]node_modules[\\/]/,
},
asyncVendors: {
chunks: 'async',
test: /[\\/]node_modules[\\/]/,
},
},
},
},
<强> initVendors 强>
使用chunks: 'initial'
,我们建议webpack仅对初始页面加载所需的模块进行分组。
initVendors: {
chunks: 'initial',
test: /[\\/]node_modules[\\/]/,
}
<强> asyncVendors 强>
对于chunks: 'async'
,我们建议wepack只对在浏览时加载到页面异步中的模块进行分组,以获取页面加载不需要的功能。
这也将这些模块放在它们自己的块中,而不是将它们与正在使用它们的应用程序中的代码捆绑在一起。这允许对块进行长期缓存。
asyncVendors: {
chunks: 'async',
test: /[\\/]node_modules[\\/]/,
},