背景:1. 公司要求项目首屏加载速率,要求为1.5s以内,在尝试将常用接口,全部缓存后,发现还是慢,最后通过打包分析工具,发现,拆包的文件,全部都集中到一个bundle.js文件,因此决定把一些较稳定的包,拆分出去。
一般常用的策略为 craco 或者 customize-cra 本文以customize-cra来举例子。 但是其实这个拆包,背后还是依赖于http 服务的并发处理,如果某个并发队列里某个服务耗时太多,那么就,必须拆分,避免单个资源加载速度过慢
针对于webpack 主要是利用code spliting
一般前端项目中 整体主要依赖于代码分割,来处理
- 借助一个实际业务项目来举例子
eg:
if (isProduction) {
config.optimization.splitChunks = {
chunks: 'all',
cacheGroups: {
style: {
name: 'style',
test: /(less|css)/,
priority: 300,
enforce: true,
},
'vendor-stable': {
name: 'vendor-stable',
test(module) {
return module.resource && vendorStable.some((item) => module.resource.includes(item));
},
priority: 200,
reuseExistingChunk: true,
},
'vendor-wind': {
name: 'vendor-wind',
test(module) {
return (
module.resource &&
vendorWind.some((item) => module.resource.includes(item)) &&
!vendorWindExclude.some((item) => module.resource.includes(item))
);
},
priority: 180,
reuseExistingChunk: true,
},
'vendor-chart': {
name: 'vendor-chart',
test(module) {
return module.resource && vendorChart.some((item) => module.resource.includes(item));
},
priority: 160,
reuseExistingChunk: true,
},
bundle: {
name: 'bundle',
test(module) {
return module.resource && module.resource.includes('src');
},
priority: 50,
enforce: true,
},
},
};
}.js
具体例子 1.