本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com

前言随着前端应用功能的增加，项目的打包体积也会不断膨胀，影响加载速度和用户体验。本文介绍了几种常见的打包优化策略，通过Vite和相关插件，帮助减少项目体积、提升性能，优化加载速度。rollup-plugin-visualizerrollup-plugin-visualizer插件，是一个可视化工具，以图表的形式，展示打包结果的模块构成与体积分布。安装：pnpm add rollup-plugin-visualizer -D用法：// vite.config.tsimport { visualizer } from "rollup-plugin-visualizer";module.exports = {  plugins: [visualizer()],};pnpm build 一下, 打开生成的stats.html文件。

xlsx 、html2canvas、jspdf，这 3 个第三方库占了主要部分。

分包策略

在项目中，xlsx、html2canvas、jspdf，只在对应功能模块中使用，可以单独打包出来，用户使用对应功能，才会下载对应 js 脚本。

在rollupOptions选项的 manualChunks函数中控制分包逻辑，并配合 experimentalMinChunkSize 属性，阀值设置为 20 KB，模块大小，大于 20kb 的才会单独打包成 chunk。

pnpm add rollup-plugin-visualizer -D

build 一下，查看控制台信息。

成功的将这 3 个第三方库单独打包成

chunk，vite默认会把所有静态资源都打包到assets文件夹，配置chunkFileNames、entryFileNames、assetFileNames将静态资源分类。

// vite.config.tsimport { visualizer } from "rollup-plugin-visualizer";module.exports = {  plugins: [visualizer()],};

build 一下，打包后到结果：

减少包体积

vite-plugin-remove-console 移除 consele

安装：

rollupOptions: {  experimentalLogSideEffects: true,output: {    experimentalMinChunkSize: 20 * 1024,    manualChunks: (id: string) => {      if (id.includes('html2canvas')) {        return'html2canvas';      }      if (id.includes('jspdf')) {        return'jspdf';      }      if (id.includes('xlsx')) {        return'xlsx';      }    }  }}

用法:

chunkFileNames: 'static/js/[name]-[hash].js', // 代码分割后文件名 entryFileNames: 'static/js/[name]-[hash:6].js', // 入口文件名  assetFileNames: 'static/[ext]/[name]-[hash].[ext]' // 静态资源文件名

vite-plugin-compression 压缩代码

vite-plugin-compression插件压缩代码成gzip格式或者br格式，ngixn 开启 gizp，http 缓存策略。

安装:

pnpm add vite-plugin-remove-console -D

配置说明

参数	类型	默认值	说明
verbose	boolean	true	是否在控制台输出压缩结果
filter	RegExp or (file: string) => boolean	DefaultFilter	指定哪些资源不压缩
disable	boolean	false	是否禁用
threshold	number	-	体积大于 threshold 才会被压缩, 单位 b
algorithm	string	gzip	压缩算法, 可选 ['gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
ext	string	.gz	生成的压缩包后缀
compressionOptions	object	-	对应的压缩算法的参数
deleteOriginFile	boolean	-	压缩后是否删除源文件

用法:

// vite.config.tsimport { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import removeConsole from "vite-plugin-remove-console";// https://vitejs.dev/config/export default defineConfig({  plugins: [vue(), removeConsole()]});

build 一下：

修改压缩算法，打包成 br 格式：

pnpm add vite-plugin-compression -D

打包结果：

br 格式，明显比 gzip 格式还小。

外链 CDN

如果条件允许外链接 CDN，那么使用rollup-plugin-external-globals 插件将外部依赖映射为全局变量，避免将其打包进最终文件，减小文件体积。配合vite-plugin-html 自动注入代码到 HTML 文件中。

安装：

import viteCompression from 'vite-plugin-compression';export default () => {  return {    plugins: [       viteCompression({        threshold: 1024 * 20,         algorithm: 'gzip',        ext: '.gz'      })]  };};

用法：

import viteCompression from 'vite-plugin-compression';export default () => {  return {    plugins: [       viteCompression({        threshold: 1024 * 20,         algorithm: 'brotliCompress',        ext: '.br'      })]  };};

在index.html中使用 CDN 脚本：

pnpm add vite-plugin-html rollup-plugin-external-globals -D

对比效果：

优化前：1.7MB

优化后：899KB

总结

1. 可视化分析：使用 rollup-plugin-visualizer 直观查看打包后的模块大小，找出大体积模块进行优化。

2. 分包策略：通过 manualChunks 将大依赖库分离到单独的 chunk，减少首屏加载资源。

3. 去除无用 console：利用 vite-plugin-remove-console 删除开发环境中的 console，减少打包体积。

4. 代码压缩：通过 vite-plugin-compression 压缩代码为 gzip 或 brotli 格式，减小文件大小。

5. 外链 CDN：使用 rollup-plugin-external-globals 和 vite-plugin-html 将常用库通过 CDN 加载，避免将它们打包到最终文件。

这些优化策略成功将打包体积从 1.7MB 减少到 899KB，提升了应用性能。

作者：code_leon

https://juejin.cn/post/7480534286514749459