vite 引入构建分析插件

yarn add rollup-plugin-visualizer

vite.config.js里配置

    plugins: [
      copy({
        targets: [
          { src: 'node_modules/echarts/dist/component/echarts.min.js', dest: 'public/js' }
        ]
      }),
      visualizer({
        // 打包完成后自动打开浏览器，显示产物体积报告
        open: true,
        gzipSize: true,
        brotliSize: true,
      }),
    ],

yarn build 后会自动打开stats.html

echarts 占比比较大，修改为按需引入后由

到

减少了1M左右

utils文件夹下新建js

//echarts.js

import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/legend';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// **引入组件 都是以Chart结尾 关键 我这里只用到了折线图, 如果要引入饼状图 PieChart
import { LineChart, PieChart, BarChart, RadarChart } from 'echarts/charts';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  PieChart,
  BarChart,
  RadarChart
]);

export default echarts;

在使用的页面里按照下面的引入方式即可

import ?echarts from '@/utils/echarts';