WenSen博客

一、 现状分析

我们的后台管理系统首屏加载时间长达 4 秒，Lighthouse 评分仅为 30 分。主要的性能瓶颈在于：

• JS 包体积过大 (Vendor.js > 2MB)
• 大量未压缩的图片
• 未开启 Gzip 压缩

二、 优化手段

1. 路由懒加载 (Code Splitting)

在 Vue Router 中，不要一次性引入所有组件：

// 优化前
import UserDashboard from './views/UserDashboard.vue';
// 优化后

const UserDashboard = () => import('./views/UserDashboard.vue');

这样 Webpack 会将每个路由页面打包成独立的 chunk，按需加载。

2. 图片优化

使用 WebP 格式代替 PNG/JPG，并开启懒加载：

<img src="placeholder.jpg" data-src="real-image.webp" loading="lazy" />

3. 开启 HTTP/2 与 Gzip

在 Nginx 配置中开启 gzip：

gzip on;
gzip_types text/plain application/json application/javascript text/css;

三、 优化结果

经过上述调整，Vendor.js 减少至 300KB，首屏 FCP (First Contentful Paint) 降至 0.8 秒，Lighthouse 评分提升至 95 分。