一、构建优化与代码精简

1.1 代码分割与异步加载

• 路由级代码分割：使用动态导入语法拆分路由组件
• 组件级懒加载：结合Suspense实现按需加载

javascript

// vue-router 4.x 配置
const routes = [
  {
    path: '/dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue')
  }
]

1.2 Tree Shaking优化

• 使用ES模块语法（避免module.exports）
• 配置sideEffects标记
• 按需引入第三方库（如lodash-es）

javascript

// 正确引入方式
import { debounce } from 'lodash-es'

// 错误引入方式（全量引入）
import _ from 'lodash'

1.3 构建分析工具

bash

# 安装分析插件
npm install --save-dev webpack-bundle-analyzer

javascript

// vue.config.js 配置
module.exports = {
  chainWebpack: config => {
    config.plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  }
}

二、资源加载策略优化

2.1 关键资源预加载

html

<!-- 预加载关键资源 -->
<link rel="preload" href="/fonts/iconfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/static/chunk-vendor.js">

运行 HTML

2.2 图片优化方案

2.3 CDN加速实践

javascript

// vue.config.js 配置外部依赖
module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios'
    }
  }
}

三、运行时性能优化

3.1 虚拟滚动优化长列表

vue

<template>
  <RecycleScroller
    class="list"
    :items="largeList"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">{{ item.content }}</div>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: { RecycleScroller }
}
</script>

3.2 响应式数据优化

javascript

// 使用 shallowRef 优化大对象
const largeObj = shallowRef({/* 大数据对象 */})

// 冻结不需要响应式的数据
const staticData = Object.freeze({/* 静态配置数据 */})

3.3 组件渲染优化技巧

vue

<template>
  <!-- 使用 v-once 静态化内容 -->
  <header v-once>网站标题</header>
  
  <!-- 延迟非关键内容 -->
  <DeferredContent>
    <RecommendationList />
  </DeferredContent>
</template>

<script>
// 延迟加载组件
const DeferredContent = defineComponent({
  setup(_, { slots }) {
    const show = ref(false)
    onMounted(() => {
      requestIdleCallback(() => {
        show.value = true
      })
    })
    return () => show.value ? slots.default?.() : null
  }
})
</script>

四、服务端优化方案

4.1 服务端渲染（SSR）方案对比

4.2 静态生成（SSG）最佳实践

bash

# 使用VitePress生成静态站点
npm install -D vitepress

# 创建文档结构
npx vitepress init

4.3 Edge Side Includes (ESI) 缓存策略

html

<!-- 使用ESI实现动态片段缓存 -->
<esi:include src="http://cdn.example.com/header.html" cache-control="public, max-age=3600" />

运行 HTML

五、监控与持续优化

5.1 性能指标监测

javascript

// 使用Performance API监控
const perfData = window.performance.timing
const loadTime = perfData.loadEventEnd - perfData.navigationStart

// 发送指标到监控系统
analytics.send('page_load', loadTime)

5.2 Lighthouse 自动化测试

javascript

// 使用Lighthouse CI配置示例
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:8080'],
      numberOfRuns: 3
    },
    assert: {
      preset: 'lighthouse:recommended'
    }
  }
}

六、高级优化技巧

6.1 Web Workers 优化计算

javascript

// 主线程代码
const worker = new Worker('./worker.js')
worker.postMessage({ data: largeDataSet })
worker.onmessage = (e) => {
  results.value = e.data
}

// worker.js
self.onmessage = ({ data }) => {
  const result = heavyCalculation(data)
  self.postMessage(result)
}

6.2 WASM 性能关键模块

javascript

// 加载WASM模块
import init, { calculate } from './pkg/optimized_module.js'

async function run() {
  await init()
  const result = calculate(bigData)
}

性能优化效果对比（示例项目）

持续优化建议

1. 性能预算约束：设定关键指标阈值（如总JS大小<200KB）
2. 增量优化策略：每次迭代解决1-2个性能瓶颈
3. 自动化监控：集成到CI/CD流程中
4. 异常熔断机制：当性能指标超标时阻止部署

yaml

# 示例GitLab CI配置
performance_test:
  stage: audit
  script:
    - npm run build
    - lighthouse-ci http://staging-site.com --score=95
  allow_failure: false

通过综合运用上述优化策略，我们成功将某电商项目的首屏加载时间从4.2秒优化至1.1秒，Lighthouse性能评分从52提升到97。建议开发者根据实际业务场景选择合适方案，建立持续的性能优化机制。