vue3+vite项目优化。

news2024/12/24 9:22:28

最近开发的一个vue3+vite+ts项目，build后发现体积过大，所以针对于项目体积进行一次优化。

一: 使用rollup-plugin-visualizer 可视化分析包

npm i rollup-plugin-visualizer -S

在vite.config.js中引入

在 plugins里面

然后执行npm run build就自动打开可视化分析

可以看到，由于项目中使用了echarts和@wangeditor富文本编辑器占据了主要体积。

二:针对于echarts优化有两种方案。

1:echarts按需引入，如果项目中用到的图表类型不多，推荐这种方式，可以有效减少项目体积。

由于我们项目中用到的是MapChart地图，在utils下面新建charts.ts

import * as echarts from 'echarts/core';
import {
    MapChart,
    // 系列类型的定义后缀都为 SeriesOption
    MapSeriesOption,
    // LineChart,
    // LineSeriesOption
} from 'echarts/charts';
import {
    TitleComponent,
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    // GridComponent,
    // GridComponentOption,
    // 数据集组件
    // DatasetComponent,
    // DatasetComponentOption,
    // 内置数据转换器组件 (filter, sort)
    // TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type ECOption = echarts.ComposeOption<
    | MapSeriesOption
    | TitleComponentOption
    | TooltipComponentOption
// | GridComponentOption
// | DatasetComponentOption
>;

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

// const option: ECOption = {
//     // ...
// };

export default echarts

在main.js中引入

并且使用provide，inject为组件注入依赖。

在组件中使用如上

2 : CDN加速

在vite.config.js中引入

import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";

经过以上操作后项目体积缩小至

三:开启Gzip压缩

npm i vite-plugin-compression -D

vite.config.js中引入

import compressPlugin from "vite-plugin-compression"; //静态资源压缩

plugins配置

compressPlugin({ //gzip静态资源压缩
        verbose: true,    // 默认即可
        disable: false,  //开启压缩(不禁用)，默认即可
        deleteOriginFile: false, //删除源文件
        threshold: 10240, //压缩前最小文件大小
        algorithm: 'gzip',  //压缩算法
        ext: '.gz', //文件类型
      }),

同样 nginx 上也需要配置，在nginx中的conf文件中的server{}中配置加上如下代码

gzip on; 
gzip_static on; 
gzip_buffers 4 16k;
gzip_comp_level 8; 
gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #压缩文件类型       
gzip_vary on;

四:图片资源压缩。

npm i vite-plugin-imagemin -D

vite.config.js中引入

import viteImagemin from 'vite-plugin-imagemin'

 viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false
        },
        optipng: {
          optimizationLevel: 7
        },
        mozjpeg: {
          quality: 20
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox'
            },
            {
              name: 'removeEmptyAttrs',
              active: false
            }
          ]
        }
      }),

不同格式的文件配置也不一样，具体可以参考 github ：vite-plugin-imagemin 。

经过以上手段优化后项目体积降低至707KB