供应商块缓存组白名单

时间:2018-10-01 12:41:27

标签: webpack webpack-4

我正在开发一个大型旧式企业应用程序,多年来将其迁移到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' 块中,并且不会包含在使用它们的条目中。

有什么想法吗?

0 个答案:

没有答案