如何优化前端性能？

🛠️ ‌一、构建工具优化‌

1. ‌Vite 深度配置‌

• ‌预构建加速‌：optimizeDeps.include 强制预构建高频依赖（如 Lodash）

• ‌路径别名‌：减少模块解析时间

resolve: { alias: { '@': path.resolve(__dirname, 'src') } }

SWC 编译器‌：替代 Babel 加速编译，速度提升约 ‌20 倍

npm install @vitejs/plugin-swc --save-dev

1. 
   

• 适用于 TS/JSX 编译，显著减少冷启动时间‌

2. ‌按需编译策略‌

• ‌代码分割‌：Rollup 的 manualChunks 拆分第三方依赖

• ‌异步组件‌：React.lazy / Vue defineAsyncComponent 延迟加载非核心模块‌

🌐 ‌二、网络传输优化‌

1. ‌HTTP/2 协议‌

• 多路复用解决队头阻塞，服务端推送关键资源（CSS/JS）

• 本地开发启用插件：vite-plugin-mkcert‌

2. ‌智能预加载‌

• <link rel="prefetch"> 预测用户下一步操作所需资源

• Vite 自动生成预加载指令，优先级高于懒加载‌

3. ‌CDN 边缘缓存‌

• 静态资源部署到 CDN，缩短物理距离延迟

• 设置 Cache-Control: max-age=31536000 强缓存‌

🖥️ ‌三、渲染性能提升‌

1. ‌虚拟滚动‌

• 万级列表渲染使用 react-window 或 vue-virtual-scroller

• 仅渲染可视区域元素，内存占用降低 ‌90%‌‌

2. ‌GPU 加速渲染‌

• CSS 动画启用 transform 和 opacity，触发 GPU 渲染层

• 避免频繁修改 width/height 引发布局重排‌

3. ‌SSR/SSG 方案‌

• Next.js/Nuxt.js 服务端渲染首屏，降低 FCP 时间

• 静态站点生成（SSG）适用内容稳定的页面‌

📦 ‌四、数据处理与缓存‌

1. ‌请求合并与压缩‌

• 小体积接口合并请求，减少 TCP 连接数

• 图片转 WebP 格式，体积减少 ‌30%‌ 以上‌

2. ‌浏览器缓存策略

1. IndexedDB 应用缓存‌

• 存储用户个性化数据，减少服务端请求

• 配合 Service Worker 实现离线访问‌

⚙️ ‌五、框架级优化‌

‌Vue 项目‌

1. ‌组件优化‌

• v-show 替代高频切换的 v-if

• v-once 标记静态组件避免重复渲染‌

2. ‌响应式精简‌

• 冻结大数据对象：Object.freeze(data)

• 手动控制侦听器：watch 添加 { deep: false }‌

‌React 项目‌

1. ‌渲染控制‌

• React.memo 缓存组件，搭配 useMemo/useCallback

• 避免在渲染函数内创建新对象‌

2. ‌状态隔离‌

• Context 拆分为独立模块，减少无关更新

• 使用 Zustand/Jotai 替代集中式状态管理‌

🔧 ‌六、监控与持续优化‌

1. ‌性能指标分析‌

• Lighthouse 检测 FCP/LCP 等核心指标

• Chrome DevTools Performance 面板定位渲染瓶颈‌

2. ‌构建产物分析‌

• rollup-plugin-visualizer 生成依赖体积图

• 针对性优化超过 500KB 的巨型模块‌

‌优化效果参考‌：某项目通过 Vite+SWC 替换 Webpack，构建时间从 ‌5分钟→2分钟‌；虚拟滚动使万级列表渲染帧率从 ‌8fps→60fps‌‌