在大多数情况下vue项目都不需要手动优化。然而，总有一些大型项目或极端应用需要针对性的优化调整。这里主要从两个方面来优化整个项目

代码层面

1. v-for遍历必须添加key，且避免同时使用 v-if

<div v-for="item in list" :key="item.id"></div>

2. 图片资源懒加载 使用三方组件vue-lazyload 或者使用img的loading可实现同样的效果

<img loading="lazy" />

3. 长列表优化 当列表过长时会严重印象页面的渲染和响应速度，通常使用虚拟列表或分段来优化长列表，可参考另一篇文章长列表优化

4. 路由懒加载

{
  component: () => import("@/views/index.vue")
}

使用keep-alive缓存组件

<keep-alive>
  <component :is="Component" :key="$route.name"/>
</keep-alive>

5. 其它

• computed和watch区分使用场景
• v-if和v-show区分使用场景
• 使用v-memo缓存子树避免没有必要的更新
• 避免所有数据都为响应数据，非响应数据可以直接使用this.赋值或取值不需要再data中定义
• ...

打包优化

1. webpack-bundle-analyzer 使用插件webpack-bundle-analyzer分析项目打包文件进行优化

2. 第三方包按需引入 通常我们使用的三方包如elementui或echarts。往往我们并不需要其中的所有功能，就可以按需引入使用需要的功能，具体见不同三方库按需引入方式。

3. 开启gzip压缩

4. 使用cdn

5. 使用浏览器缓存