性能优化案例（项目实战）

作者:青见春山

前端面试准备中关于性能优化的知识点整理，主要是通过实际案例来讲解性能优化的策略和方法。

---

npx lighthouse http://localhost:3000 --view

使用Webpack Bundle Analyzer分析打包体积

npm install webpack-bundle-analyzer --save-dev

### 优化策略



**1\. 路由懒加载**

```JavaScript
const routes = [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
  },
  {
    path: '/product/:id',
    component: () => import(/* webpackChunkName: "product" */ '@/views/Product.vue')
  }
]

2. 组件异步加载

<script setup>
import { defineAsyncComponent } from 'vue'

const HeavyChart = defineAsyncComponent(() =>
  import('@/components/HeavyChart.vue')
)
</script>

3. 第三方库按需引入+CDN加速

// vite.config.js
export default {
  build: {
    rollupOptions: {
      external: ['vue', 'vue-router', 'axios'],
      output: {
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          axios: 'axios'
        }
      }
    }
  }
}

<!-- index.html -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

4. 代码分割与压缩

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-core': ['vue', 'vue-router', 'pinia'],
          'vendor': ['axios', 'lodash-es']
        }
      }
    }
  }
}

5. 资源优化

• 图片转WebP格式，体积减少30%-70%

• 开启Gzip/Brotli压缩

• 使用<link rel="preload">预加载关键资源

6. 骨架屏

<template>
  <div v-if="loading" class="skeleton">
    <div class="skeleton-header"></div>
    <div class="skeleton-content"></div>
  </div>
  <MainContent v-else />
</template>

7. SSR服务端渲染

// Nuxt.js配置
export default {
  target: 'server',
  render: {
    compressor: { threshold: 0 }
  }
}

优化效果参考

优化项	优化前	优化后	提升幅度
JS总体积	3.2MB	680KB	↓78%
FCP时间	4.5s	0.8s	↑462%
Lighthouse评分	58分	92分	↑58%

1. Vue核心原理：虚拟DOM工作机制、Vue 3的Block Tree架构优化、Patch Flags等

2. 状态管理：Vuex与Pinia的架构差异、代码对比、选型建议

3. 网络请求：Axios二次封装、Token无感刷新、并发锁机制

4. 微信小程序：应用/页面生命周期的区别与最佳实践

5. 微信支付：完整流程、后端下单、前端调起、回调处理、异常处理

6. 性能优化：具体案例、Lighthouse诊断、多项优化策略

7. Canvas压缩：质量与压缩率平衡、OCR清晰度保障

8. AI问答：RAG架构、向量化存储、语义检索

9. AI编码：实际应用场景和效率提升案例

10. 多端架构：uni-app/Taro跨端方案、条件编译、平台适配

11. 首屏优化：路由懒加载、CDN加速、骨架屏、SSR等完整方案