前端面试题-Vue 项目中，你做过哪些性能优化?
在Vue项目中，以下是我在生产环境中实践过且用户反馈较好的性能优化方案，整理为分类要点：
一、代码层面优化
1. 代码分割与懒加载
- 路由懒加载：使用 `() => import()` 动态导入组件，结合Webpack自动代码分割。
const Home = () => import('./views/Home.vue');- 组件级懒加载：非首屏组件（如弹窗、抽屉）通过 `v-if` 或动态组件延迟加载。
- 第三方库按需引入：如 Lodash 使用 `lodash-es` 单函数引入，UI库（Element UI/Ant Design Vue）通过插件按需加载。
2. Vue特性优化
- 避免 `v-for` 与 `v-if` 混用：优先用计算属性过滤数据后再渲染。
- 合理使用 `key`：为 `v-for` 列表项添加唯一且稳定的 `key`（避免索引）。
- -计算属性缓存：用 `computed` 替代模板内复杂逻辑，减少重复计算。
- 冻结大对象：对静态数据使用 `Object.freeze()` 或 `Vue.observable({})` 跳过响应式转换。
二、构建优化
1. Webpack配置调优
- 开启 `Tree Shaking` 和 `Scope Hoisting`，删除未使用代码。
- 使用 `TerserPlugin` 压缩代码，配置多线程并行构建（如 `thread-loader`）。
- 生产环境关闭 `sourcemap`，减少构建体积。
2. 升级构建工具
- 迁移至 Vite：利用原生ESM和预构建，提升开发/构建速度（尤其适合Vue3项目）。
三、资源优化
1. 图片压缩与格式优化
- 使用 `imagemin` 压缩图片，转换为 `WebP` 格式（兼容性允许时）。
- 小图标用 **SVG雪碧图** 或字体图标（如 FontAwesome）替代PNG/JPG。
2. CDN加速
- 将 `Vue`、`Vuex`、`Vue Router` 等依赖通过CDN引入，减少打包体积。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>四、服务端优化
1. 开启Gzip/Brotli压缩
```nginx
# Nginx配置示例
gzip on;
gzip_types text/plain application/xml application/javascript;
```2. 服务端渲染（SSR）
- 使用 `Nuxt.js` 实现SSR，提升首屏加载速度与SEO效果（适用于内容型网站）。
五、性能监控与分析
1. 性能检测工具
- 使用 `Lighthouse` 和 `Chrome Performance` 分析性能瓶颈。
- 接入 `Sentry` 监控运行时错误与性能指标（如长任务、慢接口）。
2. 真实用户监控（RUM）
- 通过 `PerformanceObserver` 监听 `FP`（首次绘制）、`FCP`（首次内容渲染）等关键指标。
六、用户体验优化
1. 骨架屏与加载态
- 使用 `
vue-skeleton-webpack-plugin` 生成骨架屏，避免白屏。
2. 数据缓存策略
- 高频接口数据缓存至 `localStorage` 或 `Vuex`，配合过期时间策略。
- 使用 `Service Worker` 实现离线缓存（PWA方案）。
3. 虚拟滚动优化长列表
- 使用 `vue-virtual-scroller` 或 `vue3-virtual-scroll-list` 仅渲染可视区域元素。
七、其他优化
- 减少重排重绘：使用 `transform`/`opacity` 实现动画，避免触发布局抖动。
- Web Workers：将复杂计算（如数据解析）移至Worker线程。
- 合理使用 `keep-alive`：缓存页面组件状态，减少重复渲染（如Tab切换）。
生产环境案例反馈
1. 首屏加载时间下降 40%+
- 通过路由懒加载 + CDN + Gzip，将首屏资源从 2MB 压缩至 500KB 以内。
2. 列表滚动卡顿解决
- 万级数据列表使用虚拟滚动后，FPS从 10 提升至 60（流畅）。
3. 用户操作响应提升
- 优化长任务（如大数据量计算迁移至Web Worker），点击响应延迟从 2s 降至 200ms。
以上方案需结合具体场景权衡使用（如SSR适合SEO场景，PWA适合离线需求），核心思路是：减少负载体积、按需加载资源、利用缓存、优化运行时性能。