在日常开发中,webpack框架打包的时候,vendor打包出来居然有3.3mb.
势必会导致加载过程中的缓慢,如果是异步加载,则会加载更加迅速.那么如何实现vendor的切割呢
我们需要利用到webpack中的optimization属性
原先是vendor,chunks为all.将所有打包进来,不进行分割
splitChunks: {
chunks: 'all',
name: 'vendor'
},
现在将其中涉及到大型的项目,统统抽离出来
格式为
splitChunks: {
cacheGroups: {
you-module-name: {
name: you-module-name,
test: 匹配规则,
chunks:you-chunks,
priority: 10, // 优先级
enforce: true,
},
...
},
},
完整打包切割方案附上
splitChunks: {
cacheGroups: {
vendor: {
name: 'vendor',
test: /[\\/]node_modules[\\/]/,
chunks: 'all',
priority: 10,
enforce: true,
},
react: {
name: 'react',
test: module => /react|redux/.test(module.context),
chunks: 'initial',
priority: 11,
enforce: true,
},
antd: {
name: 'antd',
test: (module) => {
return /ant/.test(module.context);
},
chunks: 'initial',
priority: 11,
enforce: true,
},
moment: {
name: 'moment',
test: (module) => {
return /moment/.test(module.context);
},
chunks: 'initial',
priority: 13,
enforce: true,
},
},
},