前端性能优化实录：把 5 秒白屏降到 1.2 秒，只做 7 件事
稀
小高007约 4 分钟
小高007约 4 分钟❝真实项目优化实录：从 5 秒白屏到 1.2 秒加载完成，Vite 项目性能优化全攻略，附可直接复用的代码片段。
❞
📊 优化成绩单
| 「首屏加载」 | |||
| 「LCP（最大内容绘制）」 | |||
| 「JS 体积」 | |||
| 「图片总重」 |
一、代码体积瘦身：Vite + 优化
1. 代码分割 + Tree-Shaking
// vite.config.js
import { defineConfig } from'vite';
import vue from'@vitejs/plugin-vue';
exportdefault defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0];
}
},
},
},
},
});
「代码分割」：Vite 默认支持代码分割，通过 manualChunks可以进一步自定义代码分割逻辑。「Tree-Shaking」：Vite 默认启用，移除未使用的代码。
2. 压缩代码
// vite.config.js
import { defineConfig } from'vite';
import vue from'@vitejs/plugin-vue';
import { terser } from'rollup-plugin-terser';
exportdefault defineConfig({
plugins: [
vue(),
terser({
compress: {
drop_console: true, // 移除 console.log
drop_debugger: true, // 移除 debugger
},
}),
],
build: {
minify: 'terser', // 指定使用 terser 进行压缩
},
});
「terser」：进一步压缩代码，移除 console.log等调试信息。
二、资源优化：图片、字体、静态资源
1. 图片优化
「WebP/AVIF」：使用现代图片格式，体积更小，质量更高。 「懒加载」：按需加载图片，减少首屏加载时间。
// vite.config.js
import { defineConfig } from'vite';
import vue from'@vitejs/plugin-vue';
import { VitePluginLazyload } from'vite-plugin-lazyload';
exportdefault defineConfig({
plugins: [vue(), VitePluginLazyload()],
});
<imgdata-src="image.webp"class="lazy" />
<script>
new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
}).observe(document.querySelectorAll('.lazy'));
</script>
2. 字体优化
「按需加载」：只加载需要的字体样式。 「预加载」：使用 <link rel="preload">预加载关键字体。
<linkrel="preload"href="/fonts/Roboto.woff2"as="font"type="font/woff2"crossorigin />
三、网络优化：CDN、缓存
1. 使用 CDN
「CDN」：将静态资源部署到 CDN，减少服务器压力，加速加载。
// vite.config.js
import { defineConfig } from'vite';
import vue from'@vitejs/plugin-vue';
exportdefault defineConfig({
plugins: [vue()],
build: {
assetsDir: 'static',
assetsInlineLimit: 4096, // 小于 4KB 的资源内联
},
});
2. 缓存策略
「缓存控制」：部署时缓存配置示例（Nginx）,把以下片段放进你的 Nginx 配置即可，不要写vite.config.js：
# 静态资源缓存 1 年
location ~* \.(?:js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|avif|webp)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
四、首屏优化：骨架屏、预渲染
1. 骨架屏
「骨架屏」：在内容加载完成前显示占位图，提升用户体验。
<divclass="skeleton">
<divclass="skeleton-header"></div>
<divclass="skeleton-content"></div>
</div>
.skeleton {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.skeleton-header {
width: 100%;
height: 50px;
background: linear-gradient(90deg, #f0f0f0, #e0e0e0, #f0f0f0);
background-size: 200%200%;
animation: skeleton 1.5s infinite;
}
.skeleton-content {
width: 100%;
height: 200px;
background: linear-gradient(90deg, #f0f0f0, #e0e0e0, #f0f0f0);
background-size: 200%200%;
animation: skeleton 1.5s infinite;
}
@keyframes skeleton {
0% {
background-position: -200%0;
}
100% {
background-position: 200%0;
}
}
2. 预渲染
「预渲染」：使用 Vite 插件进行预渲染，减少首屏加载时间。
// vite.config.js
import { defineConfig } from'vite';
import vue from'@vitejs/plugin-vue';
import vitePrerender from'vite-plugin-prerender';
exportdefault defineConfig({
plugins: [
vue(),
vitePrerender({
routes: ['/', '/about'], // 必填
}),
],
});
五、性能监控：Lighthouse、Web Vitals
1. Lighthouse
「Lighthouse」：使用 Lighthouse 定期检查性能，找出瓶颈。
npm install -g lighthouse
lighthouse https://your-site.com --view
2. Web Vitals
「Web Vitals」：监控关键性能指标，如 LCP、FID、CLS。
import { getCLS, getFID, getLCP } from'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
六、代码优化：减少重绘、重排
1. 避免强制同步布局（FLS）
「FLS」：避免在 JavaScript 中频繁读写布局属性。
// 避免
const width = element.offsetWidth;
element.style.width = width + 10 + 'px';
// 推荐
element.style.width = element.offsetWidth + 10 + 'px';
2. 使用 CSS 动画
「CSS 动画」：使用 CSS 动画而不是 JavaScript 动画，减少重绘和重排。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
<divclass="fade-in"></div>
七、总结：7 步优化流程
「代码分割 + Tree-Shaking」：减少代码体积。 「图片优化」：使用现代格式、懒加载。 「网络优化」：使用 CDN、设置缓存。 「首屏优化」：骨架屏、预渲染。 「性能监控」：Lighthouse、Web Vitals。 「代码优化」：减少重绘、重排。 「持续优化」：定期检查、优化。
🏁 一句话总结
通过 Vite + 7 招优化，我们的项目从 5 秒白屏降到 1.2 秒加载完成，性能提升 77%。把这份优化清单贴在工位
（金石瓜分计划强势上线，速戳上图了解）