项目优化应该是作为程序员最不想做，但又不得不做的事情，毕竟只要人和程序两个有一个能跑就行。

让我们回到 vue 项目本身，Vue 框架处理了前端开发中最繁琐、最脏的部分——DOM 操作。我们不再需要关心如何操作 DOM 或如何最有效地操作。但 Vue 项目中仍然存在首屏优化、编译配置优化等问题。因此，我们仍然需要对Vue项目进行性能优化，以实现更高效的性能和更好的用户体验。

今天我将分享我在公司内部优化的一个 vue3 项目， 分享如何优化项目 bundle 产物来实现项目秒开的。

Gzip 压缩

当前端资源太大时，服务器资源请求可能会很慢。前端通过Gzip压缩可以将文件大小减少大约60%。压缩后的文件经过后端简单处理后，就可以被浏览器正常解码。

1. 安装vite插件

通过安装插件，可以让我们构建时自动构建 .gz 文件

2. vite.config.ts 配置

更多的配置信息，可查看插件的配置

3. 服务端配置

配置完Vue部分后，直接部署到nginx并不会立即生效，还需要启用nginx的gzip功能。

首先需要确认当前nginx安装是否包含gzip模块，一般默认安装ngx_http_gzip_static_module。配置前可以通过nginx -v命令检查是否包含 — with-http_gzip_static_module

然后重启nginx服务器，正常情况下应该就可以访问了。

拆分包

如果不同的模块使用的插件基本相同，那么最好尽可能将它们打包在同一个文件中，以减少 HTTP 请求。如果不同的模块明显使用不同的插件，那么应该将它们打包到不同的模块中。这就产生了矛盾。

这里，使用最小的包分割。如果是前一种情况，可以直接选择返回“vendor”。

静态资源分类打包

Vite 构建于esbuild和rollup之上。打包时，如果不配置输出，所有文件都会混合在一起。通过配置输出后，所有文件都会被分类存储，方便我们查找文件。

在vite.config.ts文件中，我们配置输出如下：

• sourcemap: 设置为 false 表示不生成源代码映射文件。
• chunkSizeWarningLimit: 设置为 4000 表示消除警告，当包大小超过 4000kb 时不再显示警告。
• rollupOptions: 定义了 Rollup 的配置选项。
• input: 输入文件路径。
• output: 输出配置，包括：
• chunkFileNames: 分块文件的命名规则。
• entryFileNames: 入口文件的命名规则。
• assetFileNames: 静态资源文件的命名规则。

当然我们还可以使用 Vite 代码分割插件 — vite-plugin-chunk-split 。支持多种代码分割策略，可以避免手动Chunks操作潜在的循环依赖问题

移除 console

使用 vite-plugin-remove-console 插件，在打包构建过程中将平台中的所有console.log移除。

减少这些无用的代码可以让我们输出的代码文件更加小，从而加载速度更快。

使用产物分析插件

Rollup Plugin Visualizer 是一个依赖分析插件，提供了多种依赖分析模式，包括直观视图分析、sunburst（圆形层次结构图，像频谱）、treemap（矩形层次结构图，比较直观，也是默认参数）、network （网格图，查看包含关系）、raw-data（原始数据模式，JSON格式）、list（列表模式）。您可以选择任何您喜欢的观察模式。

通过分析，可以找到文件尺寸的瓶颈进行专项优化。

1. 安装插件

2. 引入 vite.config.ts 配置

打包后会自动显示，附效果图：

图像资源压缩

压缩图像可以使得网站加载图片速度更快

1. 安装 unplugin-imagemin 插件

2. vite.config.ts 配置

svg 压缩

通常，下载的 SVG 或复制的 SVG 代码包含一些不相关的元素。可以删除它们以减小 SVG 大小，而不会产生任何影响。

1. 安装 vite-plugin-svg-icons 插件

2. vite 配置

3. 注册脚本

如果遇到未找到fast-glob的错误，请执行以下命令进行安装：

更多使用示例可以查看插件的官方文档

CDN 加速

引入 CDN 可以让我们将一些模块的资源部署在用户最近的地方，从而让用户更快访问到资源

1. 安装 vite-plugin-cdn-import 插件

2. vite.config.ts 配置

按需导入

按需导入可以让我们的首页打包的 bundle 体积变小，从而提升首屏加载的速度

1. 安装 unplugin-vue-components 插件

2. vite 配置

浏览器缓存

为了提高用户加载页面的速度，缓存静态资源至关重要。根据是否需要向服务器重新发起请求，HTTP缓存规则分为两大类（强缓存和验证缓存）。

如果强缓存有效，则无需与服务器交互，而验证缓存则无论其有效性如何，都需要与服务器交互。两种类型的缓存规则可以共存，其中强缓存的优先级高于验证缓存。这意味着执行强缓存规则时，如果缓存有效，则直接使用，而不执行验证缓存规则。

1. 客户端缓存控制

客户端的缓存策略主要依赖于以下实现：

• 浏览器的刷新或重新加载按钮；
• 浏览器的隐身模式（私密模式）；
• 浏览器的前进和后退导航；
• 浏览器开发人员工具的禁用缓存选项。

实现相对简单，通常涉及在请求中附加Pragma: no-cache和Cache-Control标头。这会强制重新验证或无条件地从服务器获取页面。

2. 服务器端缓存控制

服务器端缓存策略是HTTP响应头中的相关字段：

• Expires 过期
• Cache-Control 缓存控制
• Last-Modified 最后修改时间
• Etag 文件标识符

预加载

预加载（Preloading）是一种常见的前端性能优化技术，它允许开发者提前加载关键资源，确保它们在需要时已经可用。这可以减少用户的感知加载时间，并提高用户体验。

1. preload

• 用途: 提前加载指定资源，如脚本、样式表、字体等。
• 优点: 明确告诉浏览器哪些资源是重要的，并应优先加载。
• 缺点: 如果资源非常大，可能会阻塞其他资源的加载。

2. prefetch

• 用途: 提前获取可能在将来使用的资源，如图片、视频等。
• 优点: 可以在空闲时间加载资源，减少未来加载时间。
• 缺点: 如果资源未被使用，则浪费了带宽。

3. preconnect & dns-prefetch

• 用途: 预先进行 DNS 解析和建立连接，减少后续请求的延迟。
• 优点: 加速首次连接的时间。
• 缺点: 如果不使用这些资源，则会浪费带宽和计算资源。

小结

如果您有疑问或者其他问题，欢迎留言评论，大家一起探讨，一起进步～ 欢迎点赞、关注、转发～