前端性能优化实录：把 5 秒白屏降到 1.2 秒，只做 7 件事 ?真实项目优化实录：从 5 秒白屏到 1.2 秒加载完成，Vite 项目性能优化全攻略，附可直接复用的代码片段。 ??? 优化成绩单指标优化前优化后收益「首屏加载」5.2 s1.2 s↓ 77 %「LCP（最大内容绘制）」4.1 s1.0 s↓ 76 %「JS 体积」1.8 MB480 KB↓ 73 %「图片总重」6.4 MB1.9 MB↓ 70 %一、代码体积瘦身：Vite + 优化1. 代码分割 + Tree-Shaking// vite.config.js import{ defineConfig }from'vite'; importvuefrom'@vitejs/plugin-vue'; exportdefaultdefineConfig({ plugins: [vue()], build: { rollupOptions: { output: { manualChunks(id) { if(id.includes('node_modules')) { returnid.toString().split('node_modules/')[1].split('/')[0]; } }, }, }, }, }); 「代码分割」：Vite 默认支持代码分割，通过manualChunks可以进一步自定义代码分割逻辑。「Tree-Shaking」：Vite 默认启用，移除未使用的代码。2. 压缩代码// vite.config.js import{ defineConfig }from'vite'; importvuefrom'@vitejs/plugin-vue'; import{ terser }from'rollup-plugin-terser'; exportdefaultdefineConfig({ 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'; importvuefrom'@vitejs/plugin-vue'; import{ VitePluginLazyload }from'vite-plugin-lazyload'; exportdefaultdefineConfig({ plugins: [vue(), VitePluginLazyload()], }); imgsrc="image.webp"class="lazy"/ script newIntersectionObserver((entries) ={ entries.forEach((entry) ={ if(entry.isIntersecting) { constimg = 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'; importvuefrom'@vitejs/plugin-vue'; exportdefaultdefineConfig({ 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)$ { expires1y; 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: skeleton1.5sinfinite; } .skeleton-content{ width:100%; height:200px; background:linear-gradient(90deg, #f0f0f0, #e0e0e0, #f0f0f0); background-size:200%200%; animation: skeleton1.5sinfinite; } @keyframesskeleton { 0% { background-position: -200%0; } 100% { background-position:200%0; } } 2. 预渲染「预渲染」：使用 Vite 插件进行预渲染，减少首屏加载时间。// vite.config.js import{ defineConfig }from'vite'; importvuefrom'@vitejs/plugin-vue'; importvitePrerenderfrom'vite-plugin-prerender'; exportdefaultdefineConfig({ plugins: [ vue(), vitePrerender({ routes: ['/','/about'],// 必填 }), ], }); 五、性能监控：Lighthouse、Web Vitals1. 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 中频繁读写布局属性。// 避免 constwidth = element.offsetWidth; element.style.width = width +10+'px'; // 推荐 element.style.width = element.offsetWidth +10+'px'; 2. 使用 CSS 动画「CSS 动画」：使用 CSS 动画而不是 JavaScript 动画，减少重绘和重排。@keyframesfadeIn { from{opacity:0; } to{opacity:1; } } divclass="fade-in"/div 七、总结：7 步优化流程「代码分割 + Tree-Shaking」：减少代码体积。「图片优化」：使用现代格式、懒加载。「网络优化」：使用 CDN、设置缓存。「首屏优化」：骨架屏、预渲染。「性能监控」：Lighthouse、Web Vitals。「代码优化」：减少重绘、重排。「持续优化」：定期检查、优化。?? 一句话总结通过 Vite + 7 招优化，我们的项目从 5 秒白屏降到 1.2 秒加载完成，性能提升 77%。把这份优化清单贴在工位 （金石瓜分计划强势上线，速戳上图了解） 阅读原文