半张老头1. 为什么我们需要追求 Lighthouse 100 分？
在当今的Web开发领域，性能优化已经从"锦上添花"变成了"必备技能"。Google的Lighthouse工具已经成为衡量网站质量的行业标准，它能从性能(Performance)、可访问性(Accessibility)、最佳实践(Best Practices)和SEO四个维度对网站进行评分。
我最近接手了一个Vue 3 + Vite的项目，初始Lighthouse评分只有可怜的65分。经过两周的优化，最终达到了100分。在这个过程中，我发现很多优化点并不是文档中明确指出的，而是需要结合Vue和Vite的特性进行针对性处理。
提示：Lighthouse评分不是目的，而是手段。真正的目标是提升用户体验和业务转化率。根据Google的数据，页面加载时间每增加1秒，移动端的转化率就会下降20%。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 项目基础配置优化
2.1 Vite配置调优
Vite作为新一代前端构建工具，其默认配置已经做了很多优化，但我们还可以进一步调整：
javascript复制// vite.config.js
export default defineConfig({
build: {
target: 'esnext', // 使用最新的ES特性
cssCodeSplit: true, // CSS代码分割
sourcemap: false, // 生产环境关闭sourcemap
minify: 'terser', // 使用terser进行代码压缩
terserOptions: {
compress: {
drop_console: true, // 移除console.log
drop_debugger: true // 移除debugger
}
},
rollupOptions: {
output: {
manualChunks: (id) => {
if (id.includes('node_modules')) {
// 将大体积的依赖单独打包
if (id.includes('lodash')) return 'lodash'
if (id.includes('echarts')) return 'echarts'
return 'vendor'
}
}
}
}
}
})
2.2 Vue 3特定优化
Vue 3相比Vue 2在性能上已经有了很大提升，但我们还可以：
- 合理使用v-memo指令缓存模板片段
- 避免不必要的响应式数据
- 使用Composition API的shallowRef和shallowReactive减少响应式开销
- 对于静态组件使用markRaw标记为非响应式
javascript复制import { markRaw } from 'vue'
const staticComponent = markRaw({
template: '<div>静态内容</div>'
})
3. 关键性能指标优化实战
3.1 提升LCP (Largest Contentful Paint)
LCP衡量的是视窗内最大内容元素的渲染时间。优化方法：
- 图片优化：
- 使用WebP格式
- 实现懒加载
- 添加width和height属性避免布局偏移
- 使用CDN加速
html复制<img
src="image.webp"
loading="lazy"
width="600"
height="400"
alt="描述文本"
>
- 字体优化：
- 使用font-display: swap
- 预加载关键字体
- 考虑使用系统字体
css复制@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}
3.2 降低CLS (Cumulative Layout Shift)
布局偏移是影响用户体验的重要因素。解决方法：
- 为所有媒体元素设置固定尺寸
- 避免在现有内容上方插入新内容
- 使用CSS transform动画代替影响布局的属性
- 预加载关键资源
css复制.image-container {
position: relative;
padding-bottom: 56.25%; /* 16:9宽高比 */
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
3.3 优化FID (First Input Delay)
首次输入延迟影响用户交互体验。优化策略：
- 减少主线程工作：
- 分解长任务
- 使用Web Worker处理复杂计算
- 优化JavaScript执行：
- 代码分割
- 延迟加载非关键JS
- 避免大型渲染更新
javascript复制// 使用requestIdleCallback处理非紧急任务
requestIdleCallback(() => {
// 非关键任务代码
})
4. 高级优化技巧
4.1 服务端渲染(SSR)与静态站点生成(SSG)
对于内容型网站，考虑使用：
- Nuxt.js实现SSR/SSG
- Vite的SSR支持
- 预渲染关键页面
javascript复制// vite.config.js
export default {
plugins: [
vue({
template: {
compilerOptions: {
// 开启SSR优化
isCustomElement: tag => tag.startsWith('ion-')
}
}
})
]
}
4.2 资源预加载策略
- 使用
<link rel="preload">预加载关键资源 - 预取可能需要的资源
- 使用Vite的import.meta.glob动态导入
html复制<link rel="preload" href="/fonts/important.woff2" as="font" crossorigin>
<link rel="prefetch" href="/next-page-data.json" as="fetch">
4.3 缓存策略优化
- 配置正确的HTTP缓存头
- 使用Service Worker实现离线缓存
- 合理使用localStorage缓存API响应
javascript复制// 注册Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
})
}
5. 性能监控与持续优化
5.1 自动化性能测试
- 集成Lighthouse CI到CI/CD流程
- 设置性能预算
- 监控Web Vitals指标
yaml复制# .github/workflows/lighthouse.yml
name: Lighthouse Audit
on: [push]
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
- run: npm install
- run: npm run build
- uses: treosh/lighthouse-ci-action@v8
with:
urls: |
http://localhost:5000/
budgetPath: ./budget.json
5.2 真实用户监控(RUM)
- 使用Google Analytics收集Web Vitals数据
- 实现自定义性能指标监控
- 建立性能异常报警机制
javascript复制import { getCLS, getFID, getLCP } from 'web-vitals'
getCLS(console.log)
getFID(console.log)
getLCP(console.log)
5.3 常见问题排查
-
字体加载导致的布局偏移：
- 使用font-display: swap
- 预加载关键字体
- 考虑使用可变字体
-
第三方脚本拖慢页面：
- 延迟加载非关键第三方脚本
- 使用iframe隔离
- 考虑自托管常用库
-
API响应慢：
- 实现数据缓存
- 使用GraphQL减少请求数据量
- 考虑边缘计算
在实际项目中，我发现最大的性能瓶颈往往来自意想不到的地方。比如一个看似无害的动画库可能增加了几百KB的包体积，或者一个未优化的SVG图标导致LCP时间增加300ms。关键是要用数据说话，通过Lighthouse报告和Web Vitals指标找出真正的瓶颈点。
性能优化是一个持续的过程，不是一蹴而就的。我建议至少每月进行一次全面的性能审计，特别是在添加新功能或依赖项之后。记住，100分不是终点，而是为用户提供最佳体验的起点。