项目打包的分析和拆包

一、问题描述：项目启动耗时较长，影响用户体验

项目中我们可能会使用到antd、antv、chart各类图表插件等等，当我们打包项目后发现项目包会很大，所有的打包都集合到index.js（或者umi.js）中，从而使得项目运行耗时较长，影响用户体验。

二、包分析

1、安装webpack-bundle-analyzer插件

$ npm install --save-dev webpack-bundle-analyzer

2、在 webpack.config.js 中添加如下配置

module.exports = {
    chainWebpack: config => {
        config.plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
}

a、如果是umi项目直接在.envz中配置ANALYZE=1就行

b、也可以在package.json中配置命令专门用来分析

"scripts": {
    "analyze": "cross-env UMI_ENV=cloud ANALYZE=1 umi build",
  },

三、umi项目包优化处理

1、打开按需加载：dynamicImport: true

2、使用 splitChunks 进行拆包。

umi中有个配置 chainWebpack，用于修改webpack配置的，具体配置参考umi官网

3、chunks 配置，参考umi官网配置

// 默认chunks: ['index'] 或者chunks: ['umi']
chunks: ['index', 'antd'],