开发公司Vite打包优化插件

---

一、开发公司可视化和分析Rollup包

• 开发公司一款可视化和分析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压缩资源

• 一个开启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

• 构建后目录
  

---

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

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

// vite.config.jsimport legacy from '@vitejs/plugin-legacy'export default {  plugins: [    legacy({      targets: ['defaults', 'not IE 11']    })  ]}
1
2
3
4
5
6
7
8
9
10

---