我正在开发一个大型旧式企业应用程序,多年来将其迁移到Webpack 2,后来又迁移到了3。在实施Webpack的过程中,我们建立了几十个entries
和一个{{1} }块,其中包含jQuery和各种polyfill之类的大型库。使用当时最新的CommonsChunkPlugin,我可以在vendor
中指定要包含的模块列表(本地模块和注册表中的模块)。
这非常有效(甚至可以在asnyc中使用!),因为我们知道有多少%的用户访问了每个页面,并且知道模块是需要驻留在全局vendor
块中还是仅驻留在条目中(所以大多数用户不会加载仅在很少访问的几个页面中使用的模块。
当我们迁移到Webpack 4及其SplitChunksPlugin时,情况发生了变化。自从此升级以来,我们一直无法找到在vendor
块中包含特定白名单模块的解决方案。这是我们当前的配置:
vendor
现在,将2个或更多条目中使用的所有模块放入我们的optimization: {
splitChunks: {
chunks: 'all',
minChunks: 2,
name: 'dependencies'
}
}
块中(我们称之为“依赖项”)。但是,这并不是最佳选择,因为我们只希望将一些较重的模块包含在其条目块中,而不是所有用户都必须加载的模块。
我已经尝试了各种其他配置,也尝试使用splitChunks.cacheGroups.test
函数,但是我无法使其正常工作-它似乎仅遍历条目而不是其内部模块。也许它是 的解决之道,但我只是错过了一些关键的内容,但我还没有看到用于实现白名单的任何示例。该文档还说“匹配块名称时,将选择该块中的所有模块”,这与我所需要的相反。
所以我想要(以及我们在Webpack 2和3中拥有的)是拥有一个白名单模块数组,Webpack在创建vendor
块时将使用这些模块:
vendor
…,或者甚至更好的是我可以以某种方式处理的const dependencies = [
'jquery',
'core-js/fn/array/includes',
'./ui/modals'
]
文件:
dependencies.js
…,只有这些模块最终会在import 'jquery'
import 'core-js/fn/array/includes'
import './ui/modals'
块中,并且不会包含在使用它们的条目中。
有什么想法吗?