Vue3+vite project optimization.

     A recently developed vue3+vite+ts project was found to be too large after build, so it was optimized for the project size.

One: Use the rollup-plugin-visualizer visual analysis package

npm i rollup-plugin-visualizer -S

Import in vite.config.js

in plugins

 Then execute npm run build to automatically open visual analysis

It can be seen that due to the use of echarts and @wangeditor rich text editors in the project occupy the main volume.

Two: There are two options for echarts optimization.

1: echarts is introduced on demand. If there are not many types of charts used in the project, this method is recommended, which can effectively reduce the project size.

Since the MapChart map is used in our project, create a new charts.ts under utils

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

Introduced in main.js

And use provide, inject to inject dependencies for components. 

 

In the component use as above

2 : CDN Acceleration

Import in vite.config.js

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

 After the above operations, the project size is reduced to

Three: Turn on Gzip compression

npm i vite-plugin-compression -D

Introduced in vite.config.js

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

 plugins configuration

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

 Similarly, configuration is also required on nginx, and the configuration in server{} in the conf file in nginx adds the following code

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;

Four: Image resource compression.

npm i vite-plugin-imagemin -D

Introduced in 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
            }
          ]
        }
      }),

File configurations of different formats are also different, for details, please refer to github: vite-plugin-imagemin  .

After optimization by the above means, the project size is reduced to 707KB