测试A:那啥!抠图仔,线上样式怎么点着点着就出问题了。
前端:啥?线上css样式错乱了?你是不是有缓存啊!清下缓存试试。
测试A(内心戏:这抠图仔一有问题就赖缓存):清缓存后,还有啊!你看看吧!
前端:见鬼了,我本地没复现啊。
在某次迭代中,在做产品体验的时候发现从申请记录页面跳转我的订单,在切回来,发现申请记录页样式错乱了。本地调试发现没有该问题。
为什么会出现这种场景?为什么该问题测试环境会出现,本地环境未复现?
调试发现 .ant-card可以从多个chunk文件引入,切换到network面板发现,2966....chunk.css文件是在我们跳转到我的订单页面才引入的。也就是我的订单页面按需加载组件打包出来的样式文件。
到这其实就定位到问题所在了,相同组件在不同页面按需加载的时候css文件被重复打包了。
开发环境不会,是因为我们导入组件是直接导入的node_modules的es模块的文件,如图:
dynamicImport: {loading: '@/Loading',},
umi开启dynamicImport时,会启动按route分包,实现页面级别的按需加载,这种分包模式明显在处理antd的样式模块复用上出现了一些问题。
所以推荐项目开启该模式时,antd应该使用下面的方案二进行处理antd的样式,防止出现偶现的线上问题。
之前代码中会出现很多莫名其妙的!important去提高样式的权重,当然也有在页面级引入antd.css的,可能也是因为遇到了antd样式覆盖的问题。
// ...optimization: {splitChunks: {chunks: 'all',minSize: 30000,minChunks: 2,automaticNameDelimiter: '.',cacheGroups: {antd: {name: 'antdesigns',test: /[\/]node_modules[\/](antd|antd-mobile|@ant-design)[\/]/,priority: 20,},vendors: {name: 'vendors',test({ resource }: any) {return /[\/]node_modules[\/]/.test(resource);},priority: 10,},},},},// ...
优化后如图所示,申请记录页面跳转到我的订单页面再跳回来,.ant-card并没有多产生一个css文件引入。整个dist文件包体积从116.5M到108.4M,降低了8.1M。
webpack.docschina.org/plugins/spl…
警告
选择了默认配置为了符合 Web 性能最佳实践,但是项目的最佳策略可能有所不同。如果要更改配置,则应评估所做更改的影响,以确保有真正的收益,所以我们做上述分包策略时,需要根据实际项目情况来处理。
// 下面这个配置对象代表 SplitChunksPlugin 的默认行为。module.exports = {//...optimization: {splitChunks: {// 有效值为 all,async 和 initialchunks: 'async',// 生成 chunk 的最小体积(以 bytes 为单位)。minSize: 20000,// 通过确保拆分后剩余的最小 chunk 体积超过限制来避免大小为零的模块。minRemainingSize: 0,// 拆分前必须共享模块的最小 chunks 数。minChunks: 1,// 按需加载时的最大并行请求数。maxAsyncRequests: 30,// 入口点的最大并行请求数。maxInitialRequests: 30,// 强制执行拆分的体积阈值和其他限制(minRemainingSize,maxAsyncRequests,maxInitialRequests)将被忽略。enforceSizeThreshold: 50000,/*** 缓存组可以继承和/或覆盖来自 splitChunks.* 的任何选项。* 但是 test、priority 和 reuseExistingChunk 只能在缓存组级别上进行配置。* 将它们设置为 false以禁用任何默认缓存组。*/cacheGroups: {defaultVendors: {/*** 控制此缓存组选择的模块。省略它会选择所有模块。* 注:使用/是因为要同时适配unix和windows系统*/test: /[\/]node_modules[\/]/,// 优先级,默认值0priority: -10,// 如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块。这可能会影响 chunk 的结果文件名。reuseExistingChunk: true,},default: {minChunks: 2,priority: -20,reuseExistingChunk: true,},},},},};
线上和本地运行结果不一致,一直是一件让前端开发者头痛的问题。造成这种情况的原因之一呢?是因为场景不一样,webpack提供了两种模式。
我们要杜绝发生线上和本地运行结果不一致的这种情况,需要我们深入了解项目中会用到的webpack,vite,rollup等前端工程化工具的内部打包机制。
作者:城主北宁
链接:
https://juejin.cn/post/7346884660443988019