Vue3性能优化之打包_vue3打包优化

性能分析

​谷歌浏览器Chrome自带的DevTools 工具 LightHouse 进行性能分析。

注意分析时要保持浏览器在当前分析标签页

依赖视图分析（rollup-plugin-visualizer）

安装

npm i rollup-plugin-visualizer -D
1

vite.config.ts 配置

import visualizer from 'rollup-plugin-visualizer'
export default ({ mode }: ConfigEnv): UserConfig => {
	return defineConfig({
		plugins: [
			vue(),
			vueJsx(),
	        visualizer({
	          open:true
	        })
		],
1
2
3
4
5
6
7
8
9
10

项目执行build后，会在根目录生成stats.html文件

鼠标滑动或点击及获取相关信息。

打包优化

vite打包优化

vite.config.ts 加入如下代码

build: {
	outDir: 'dist',
	chunkSizeWarningLimit: 2000,
	cssCodeSplit: true, //css 拆分
	sourcemap: false, //不生成sourcemap
	minify: false, //是否禁用最小化混淆，esbuild打包速度最快，terser打包体积最小。
	assetsInlineLimit: 5000 //小于该值 图片将打包成Base64
},
1
2
3
4
5
6
7
8

gzip压缩

npm i vite-plugin-compression -D
1

配置参数

• filter：过滤器，对哪些类型的文件进行压缩，默认为/.(js|mjs|json|css|html)$/i
• verbose: true：是否在控制台输出压缩结果，默认为 true
• threshold ：启用压缩的文件大小限制，单位是字节，默认为 0
• disable : false：是否禁用压缩，默认为 false
• deleteOriginFile ：压缩后是否删除原文件，默认为 false
• algorithm ：采用的压缩算法，默认是 gzip
• ext ：生成的压缩包后缀

import viteCompression from 'vite-plugin-compression'
plugins: [
	vue(),
	vueJsx(),
	viteCompression({
		// 是否在控制台输出压缩结果
		verbose: true, 
		// 是否禁用,相当于开关在这里
		disable: false, 
		// 体积大于 threshold 才会被压缩,单位 b，1b=8B, 1B=1024KB  这里相当于 9kb多，就会压缩
		threshold: 10240, 
		// 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
		algorithm: 'gzip', 
		//文件后缀名
		ext: '.gz', 
	}),
	visualizer({
		open: true
	})
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

再次执行build可观看压缩结果

打包后的文件放入服务器需要进行Nginx的相关配置

server{
    #gzip
    #开启gzip功能
    gzip on;
    #开启gzip静态压缩功能
    gzip_static on;
    #gzip缓存大小
    gzip_buffers 4 16k;
    #gzip http版本
    gzip_http_version 1.1;
    #gzip 压缩级别 1-10 
    gzip_comp_level 5;
    #gzip 压缩类型
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; 
    gzip_vary on; 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

图片压缩 vite-plugin-imagemin

npm i vite-plugin-imagemin -D
1

vite.config.ts plugins配置

import viteImagemin from 'vite-plugin-imagemin'
plugins: [
      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
            }
          ]
        }
      })
    ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

再次执行build后观察结果