如何优化前端性能？
🛠️ 一、构建工具优化
Vite 深度配置
预构建加速：
optimizeDeps.include强制预构建高频依赖（如 Lodash）路径别名：减少模块解析时间
resolve: { alias: { '@': path.resolve(__dirname, 'src') } }SWC 编译器：替代 Babel 加速编译，速度提升约 20 倍
npm install @vitejs/plugin-swc --save-dev
适用于 TS/JSX 编译，显著减少冷启动时间
按需编译策略
代码分割：Rollup 的
manualChunks拆分第三方依赖异步组件：React.lazy / Vue defineAsyncComponent 延迟加载非核心模块
🌐 二、网络传输优化
HTTP/2 协议
多路复用解决队头阻塞，服务端推送关键资源（CSS/JS）
本地开发启用插件：
vite-plugin-mkcert智能预加载
<link rel="prefetch">预测用户下一步操作所需资源Vite 自动生成预加载指令，优先级高于懒加载
CDN 边缘缓存
静态资源部署到 CDN，缩短物理距离延迟
设置
Cache-Control: max-age=31536000强缓存
🖥️ 三、渲染性能提升
虚拟滚动
万级列表渲染使用
react-window或vue-virtual-scroller仅渲染可视区域元素，内存占用降低 90%
GPU 加速渲染
CSS 动画启用
transform和opacity，触发 GPU 渲染层避免频繁修改
width/height引发布局重排SSR/SSG 方案
Next.js/Nuxt.js 服务端渲染首屏，降低 FCP 时间
静态站点生成（SSG）适用内容稳定的页面
📦 四、数据处理与缓存
请求合并与压缩
小体积接口合并请求，减少 TCP 连接数
图片转 WebP 格式，体积减少 30% 以上
浏览器缓存策略
IndexedDB 应用缓存
存储用户个性化数据，减少服务端请求
配合 Service Worker 实现离线访问
⚙️ 五、框架级优化
Vue 项目
组件优化
v-show替代高频切换的v-ifv-once标记静态组件避免重复渲染响应式精简
冻结大数据对象：
Object.freeze(data)手动控制侦听器：
watch添加{ deep: false }
React 项目
渲染控制
React.memo缓存组件，搭配useMemo/useCallback避免在渲染函数内创建新对象
状态隔离
Context 拆分为独立模块，减少无关更新
使用 Zustand/Jotai 替代集中式状态管理
🔧 六、监控与持续优化
性能指标分析
Lighthouse 检测 FCP/LCP 等核心指标
Chrome DevTools Performance 面板定位渲染瓶颈
构建产物分析
rollup-plugin-visualizer生成依赖体积图针对性优化超过 500KB 的巨型模块
优化效果参考：某项目通过 Vite+SWC 替换 Webpack，构建时间从 5分钟→2分钟；虚拟滚动使万级列表渲染帧率从 8fps→60fps