来一次酣畅淋漓的vite打包优化吧

最近发现项目首次加载特别慢，原来是打包出来的文件太大的原因。

项目技术栈：vue3 + vite + ts + ant design vue

既然这样，那就开始打包优化吧。打包分析，结果如下：

第一步，ant-design-vue由全量引入改为按需引入。 修改前：

import type { App } from 'vue';
import { Button } from './Button';
import { Input, Layout,Table,Pagination } from 'ant-design-vue';
import Antd from 'ant-design-vue';
import VXETable from 'vxe-table';
import * as echarts from 'echarts'

export function registerGlobComp(app: App) {
  app.use(Input).use(Button).use(Layout).use(Antd).use(Table).use(VXETable);
  app.config.globalProperties.$echarts = echarts;
}

修改后

import type { App } from 'vue';
// import { Button } from './Button';
import { Input,Button, Layout,Table,Pagination,Card,Popover,Tooltip,Textarea,message,Select,Radio,RadioButton,RadioGroup,RangePicker,Cascader,Row,Col,Form,FormItem,Modal,Divider,TypographyText,Switch,Space,DatePicker,Empty,Transfer,Upload,List,Tabs,TabPane,Tag,Tree,Spin,InputNumber,Popconfirm,Typography,Avatar } from 'ant-design-vue';
import Antd from 'ant-design-vue';
import VXETable from 'vxe-table';
import * as echarts from 'echarts'


export function registerGlobComp(app: App) {
  app.use(Input).use(Button).use(Layout).use(Pagination).use(Card).use(Popover).use(Table).use(Tooltip).use(Select).use(Radio)
  .use(Cascader).use(Row).use(Col).use(Form).use(Modal).use(Divider).use(Switch).use(Space).use(DatePicker).use(Empty).use(Transfer)
  .use(Upload).use(List).use(Tabs).use(Tag).use(Tree).use(Spin).use(InputNumber).use(Popconfirm).use(Typography).use(Avatar);
  app.config.globalProperties.$echarts = echarts;
}

再次打包，结果如下：

可以看到最大的两个js文件大小都减小了一些。但是还是很大。 观察打包结构图，发现index.js文件中包含了echarts，那么把echarts单独打包，试一下。修改vite.config.ts

再次打包，结果如下：

可以看到echarts已经被单独分开了，index.js文件的大小降低到了541k，但是单独一个echarts怎么打包完这么大？差不多1M了。查阅资料得知，我目前的echarts是全量引入的，echarts也可以按需引入，只需要单独封装一下。

新建一个commonEcharts.ts文件。注意事项已备注。

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart,GaugeChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  ToolboxComponent
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  GaugeChart,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
  LegendComponent,
  ToolboxComponent
]);
// 导出
export default echarts;

在原来的全局注册处导入，进行如下替换

// import * as echarts from 'echarts'
import echarts from '@/utils/commonEcharts'

再次打包，查看结果：

可以看到echarts的包体积大小减少了40%。 那么接下来，antd文件还是太大，打包后的大小超过了1M，为了进行更详细的优化，换一种分包的写法。 在vue.config.js中，做出如下修改：

let antdSplitArr = [
  'node_modules/ant-design-vue/es/table',
  'node_modules/ant-design-vue/es/select',
  'node_modules/ant-design-vue/es/form',
  'node_modules/ant-design-vue/es/menu',
  'node_modules/ant-design-vue/es/vc-picker',
  'node_modules/ant-design-vue/es/_util',
  'node_modules/ant-design-vue/es/vc-table',
  'node_modules/ant-design-vue/es/vc-select',
]

在build中，使用包id匹配的方式，进行详细分包

build:{
      rollupOptions:{
        output:{
          manualChunks(id){
            for(let i = 0; i < antdSplitArr.length; i++){
              if(id.includes(antdSplitArr[i])){ return 'antd-split' }
            }
            if(id.includes('node_modules/echarts')){
              return 'echarts'
            }else if(id.includes('node_modules/ant-design-vue/es/')){
              return 'antd'
            }else if(id.includes('node_modules/vue') || id.includes('node_modules/pinia') || id.includes('node_modules/vue-router')){
              return 'vue'
            }else if(id.includes('node_modules/@ant-design/icons-vue') || id.includes('node_modules/lodash') || id.includes('node_modules/sortable')){
              return 'antd-icon-ld-sortable'
            }
          }
        }
      }
    },

最后再看一下打包结果吧：

已经没有大文件了，是不是很神奇。