Vite打包优化插件

---

一、可视化和分析Rollup包

• rollup-plugin-visualizer
• 一款可视化和分析Rollup包，查看哪些模块占用了空间。
• npm install --save-dev rollup-plugin-visualizer

import { defineConfig } from "vite"
import { visualizer } from "rollup-plugin-visualizer"

export default defineConfig({
  plugins: [
    visualizer({
      open: true, //注意这里要设置为true，否则无效
      gzipSize: true,
    })
  ],
})
1
2
3
4
5
6
7
8
9
10
11

---

二、使用gzip或brotli压缩资源

• vite-plugin-compression
• 一个开启gzip或者brotli压缩资源插件
• npm i vite-plugin-compression -D
• algorithm：压缩算法,可选 [ ‘gzip’ , ‘brotliCompress’ ,‘deflate’ , ‘deflateRaw’]

import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [
		 viteCompression({
	      deleteOriginFile: false,
	      algorithm: "gzip",
	    }),
	],
  };
};
1
2
3
4
5
6
7
8
9
10
11
12

---

三、打包构建优化配置

import { defineConfig } from "vite"

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-router-dom"],
          echarts: ["echarts"],
          lodash: ["lodash"],
          antd: ["antd"],
          moment: ["moment"],
          ahooks: ["ahooks"],
          reactJss: ["react-jss"],
          exceljs: ["exceljs"],
          html2canvas: ["html2canvas"],
        },
      },
    },
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 构建后目录
  

---

四、为生产版本提供遗留浏览器支持

• @vitejs/plugin-legacy
• 一款为生产版本提供遗留浏览器支持插件
• 必须安装Terser，因为遗留插件使用Terser来缩小。
• npm add -D terser @vitejs/plugin-legacy

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}
1
2
3
4
5
6
7
8
9
10

---