Skip to content

前端工程性能优化之道

· 13 min

大家好，我是那个看到 3 秒白屏就心里发毛的前端。做前端久了，慢慢摸到一个真理：性能就是用户的耐心，磨没了就走人。今天以 Vue 3 为例，聊聊在编码和工程化两条线上的一些优化心得。

一、编码层面（以 Vue 3 为例）#

1. 合理使用 key#

2. 合理使用 v-if 和 v-show#

3. 合理使用 computed 和 watch#

小例子：

// computed：把业务逻辑留在派生数据里
const list = ref<Item[]>([])
const visibleList = computed(() => list.value.filter(i => !i.hidden))


// watch：副作用与异步
watch(() => route.params.id, async (id) => {
  if (!id) return
  data.value = await fetchDetail(id)
}, { immediate: true })

4. 配合 动态组件#

<keep-alive include="UserList,UserForm" :max="5">
  <router-view v-slot="{ Component }">
    <component :is="Component" />
  </router-view>
</keep-alive>

5. 路由懒加载、动态导入#

const routes = [
  { path: '/', component: () => import('@/pages/Home.vue') },
  { path: '/user', component: () => import('@/pages/User.vue') },
]

6. 插件按需加载#

7. 普通图片升级为 WebP#

<picture>
  <source srcset="/img/banner.webp" type="image/webp" />
  <img src="/img/banner.jpg" alt="banner" loading="lazy" />
</picture>

8. 骨架屏#

9. 延迟装载：异步组件 + <Suspense>#

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
const Chart = defineAsyncComponent(() => import('./Chart.vue'))
</script>


<template>
  <Suspense>
    <template #default>
      <Chart />
    </template>
    <template #fallback>
      <div class="loading">图表加载中...</div>
    </template>
  </Suspense>
</template>

10. Vue 细节再进阶：省点“响应式账单”#

11. 渲染与交互：主线程“别堵车”#

二、工程化方面#

1. 图片压缩、懒加载#

2. CDN#

3. 静态文件压缩、代码分割、提取公共 CSS、优化 SourceMap#

4. gzip 压缩（或 brotli）#

5. DLL 加载（老 Webpack 项目的备选方案）#

6. 文件长缓存#

7. HTTP/2（或 HTTP/3）#

8. 缓存策略#

9. 指标与监控：别盲修，先会量#

10. 网络与资源调度：让“路”更顺#

11. 构建与包体积：少即是多#

12. SSR/SSG/流式渲染：“先看见，再水合”#

13. PWA 与离线：体验加成，但要管好“更新”#

14. 内存与泄漏：慢慢变慢也是慢#

15. 工程实战小清单#

小结#

性能优化是“系统工程”：监控先行、定位精准、落地务实、持续回归。上面这些点，覆盖了从指标、构建、网络到运行时的关键环节——“手起刀落，干净利索”。