优化缘由
- 项目越来越大,依赖越来越多,
- 打包后的js 越来越大 其中最大的js文件通过nginx gzip压缩后 还有 4MB, 影响客户体验.
查看文件打包分析
cross-env ANALYZE=1 umi build
优化方法
- 删除代码中冗余的,没有用到的第三方依赖
- 将用得很少的依赖 从 node_modules 中直接复制粘贴到本地项目代码中(实现按需加载), 并npm uninstall 此依赖
- 使用 umi-plugin-react 插件的chunks 和 umi的 chainWebpack 配置项 将依赖打包到不同多个文件中
以下是umi 配置文件相关代码
plugins: [
[
'umi-plugin-react',
{
antd: true,
dva: {
hmr: true,
},
chunks: [
'vendors',
'antd',
'echarts',
'umi'],
},
],
],
config.optimization.splitChunks({
chunks: 'all',
automaticNameDelimiter: '~',
name: true,
minSize: 30000,
minChunks: 1,
cacheGroups: {
echarts: {
name: 'echarts',
chunks: 'async',
test: /[\\/]node_modules[\\/](echarts|bizcharts)[\\/]/,
priority: -9,
enforce: true,
},
antd: {
name: 'antd',
test: /[\\/]node_modules[\\/](@ant-design|antd|antd-mobile)[\\/]/,
priority: -10,
enforce: true,
},
vendors: {
name: 'vendors',
test: /[\\/]node_modules[\\/]/,
priority: -15,
enforce: true,
},
},
});