优化 vite 首屏加载的核心做法是实施路由级代码分割并开启生产环境 gzip 压缩。通过配置 vite.config.js 中的 build.rollupoptions 引入 @rollup/plugin-gzip，将打包后的资源转换为 .gz 格式，从而显著减小传输体积。同时，利用 vue router 的懒加载特性，确保非核心模块仅在用户访问时下载，避免一次性加载整个应用。
如何配置 Vite 实现 Gzip 压缩
在 Vite 项目中启用 Gzip 压缩需要安装 @rollup/plugin-gzip 并在构建配置中注册该插件。这会在构建阶段生成额外的 .gz 文件，服务器需配合 Nginx 或 Node.js 中间件提供这些静态资源以生效。
import { defineConfig } from 'vite';
import gzipPlugin from '@rollup/plugin-gzip';
export default defineConfig({
build: {
rollupOptions: {
plugins: [
gzipPlugin({
include: [/\.js$/, /\.css$/],
threshold: 1024 // 仅压缩大于 1KB 的文件
})
]
}
}
});上述配置会将所有 JavaScript 和 CSS 文件进行压缩。预期结果是构建输出目录中除了原始的 index.js 外，还会生成 index.js.gz。服务器端若正确配置了 Accept-Encoding: gzip 响应头，浏览器将下载更小的文件，从而加快解析速度。
立即学习“Java免费学习笔记（深入）”；
如何实现路由级代码分割
代码分割通过将应用拆分为多个块（Chunks），让浏览器按需加载页面所需的代码。在 Vue 3 + Vite 环境中，推荐使用动态导入语法 (() => import('./views/About.vue')) 来定义路由组件。
// router/index.js
const routes = [
{
path: '/about',
component: () => import('./views/About.vue')
},
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue')
}
];当用户首次访问首页时，只会下载首页相关的 JS 包。点击导航进入 /about 路径时，浏览器才会请求并执行 About.vue 对应的 chunk。这种策略避免了初始包过大导致的白屏时间过长问题。构建后，每个被分割的路由都会生成独立的 [name].[hash].js 文件。
未使用 Gzip 压缩对首屏加载的影响
如果项目未配置 Gzip 压缩，浏览器下载的原始 JS 和 CSS 文件体积会较大。例如，一个 500KB 的 bundle 在未压缩状态下可能需要数秒才能下载完毕，尤其是在弱网环境下。启用 Gzip 后，相同内容的体积通常可缩减至原来的 30% 左右，即约 150KB，大幅缩短 TTFB（首字节时间）之后的下载耗时。
