使用umi框架的时候打包发布时在配置文件umirc.ts中,可以使用一下配置自动开启打包
需要更细致的打包时应该使用手动拆包
以上为umi提供的自动/手动拆包方法,官网地址:代码拆分指南
但是手动拆包时每次引入该组件的时候都需要这样引入lazy非常麻烦,这样可以在环境配置文件中,如本项目环境配置文件.umirc.uat.ts中配置拆包代码
chainWebpack(config, { webpack }) {
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
vendors: {
name: 'vendors',
test: /[\\/]node_modules[\\/](antd|@ant-design|react|react-dom)[\\/]/,
priority: 10,
filename: 'vendors.js',
enforce: true,
},
vendors1: {
name: 'vendorsmap',
test: /[\\/]node_modules[\\/](mapvgl)[\\/]/,
priority: 9,
filename: 'vendorsmap.js',
enforce: true,
},
vendors2: {
name: 'vendorsechart',
test: /[\\/]node_modules[\\/](echarts|echarts-for-react)[\\/]/,
priority: 8,
filename: 'vendorsechart.js',
enforce: true,
},
},
});
config.plugin('compression').use(CompressionPlugin, [
{
algorithm: 'gzip',
test: /\.(js|css|html|svg|json)$/,
deleteOriginalAssets: false, // 保留原始未压缩文件
threshold: 1024,
},
]);
},