Vite打包优化

关于指标,这里简单介绍下常见的优化指标

  • FCP(First Contentful Paint):白屏时间(第一个文本绘制时间)
  • Speed Index:首屏时间
  • TTI(Time To Interactive): 第一次可交互的时
  • lighthouse score:Chrome浏览器审查工具性能评分

一.Bundle 分析

因为使用的是 vite,借助插件 rollup-plugin-visualizer,来进行 bundle 分析

1.安装

pnpm i rollup-plugin-visualizer -D

2.引入(在vite.config.ts文件引入)

import { visualizer } from 'rollup-plugin-visualizer'
const plugins = [vue(), visualizer()]

打包之后会在项目根目录生成 stats.html 文件,打开

Vite打包优化_第1张图片

可以分析出那块文件较大,影响了速度.

 二.开始优化

1.GZIP 配置

这里顺便介绍下 vite 的 GZIP 配置

安装 vite-plugin-compression

npm i vite-plugin-compression -D

修改 vite.config.js 配置 

import viteCompression from 'vite-plugin-compression'
 
 plugins: [vue(), viteCompression()]

 打包后就会生成 gzip 文件了,但是服务端 nginx 还需要配置一下才能生效

http {
    gzip_static on;
    gzip_proxied any;
}

 2.echarts 单独拆分

修改 vite.config.js 配置

build: {
    rollupOptions: {
        output: {
            manualChunks: {
                echarts: ['echarts']
            }
        }
    }
}

打包后 Index.js 体积变化(未压缩前)

Before: 4.49MB

After: 1.34MB

3.图片压缩

安装 vite-plugin-imagemin

npm i vite-plugin-imagemin -D

修改 vite.config.js 配置

import viteImagemin from "vite-plugin-imagemin"
plugins: [vue(), viteImagemin()]

打包后会生成压缩的图片,但是每次打包都会重新压缩一遍,比较浪费时间,如果不介意的话采用此方案也很简单.

你可能感兴趣的:(Vite)