Vue项目的18种性能优化思路详解

（最近在钻研Vue3,容易给Vue2给忘咯）

开始

本章提供思路包括以下。

• Vue 代码层面的优化
• webpack 配置层面的优化
• 基础的 Web 技术层面的优化
• Chrome Performance，WebPageTest 性能分析工具

优化思路

Vue官网关于性能优化也有一些概述，感兴趣的话可以Look Look（查看)

1. webpack-bundle-analyzer 可以清晰查看打包文件的大小

//package.json添加，不咋记这代码，加个代码块
"build-report": "vue-cli-service build --report"
==>dist==>report.html

2. 考虑渲染（浏览器在渲染出页面之前，有一段白屏的时间，可以添加 loading之类的）
3. v-if , v-show使用场景的区分
4. v-for需要加key，且key值不推荐用index
5. v-for 与 v-if 使用需考虑冲突（vue2: v-for > v-if ，vue3 : v-for < v-if ）
6. 使用keep-alive缓存不活动的组件
7. 模块懒加载

//=_=加个代码
// app.js
const demo= () => import('./demo.js')

// 延迟加载
demo().then({ demo-text} => demo())

8. 图片资源懒加载（无论是考虑大量加载还是弱网络）

//不爱记这插件名 加个常用的代码块先
 npm install vue-lazyload --save-dev
 import VueLazyload from 'vue-lazyload'
 <img v-lazy="/static/img/1.png">

9. 路由懒加载 （Vue3是异步组件）

//别说 你还真别说 加个代码先
const routes = [
  { path: '/', component: () => import('./a.vue') }
  { path: '/luyou', component: () => import('./b.vue') }
]

10. 第三方插件按需引入
11. 长列表使用虚拟列表（理解一个概念 响应数据 和 展示数据）
12. 响应数据量的控制（computed 和 watch 区分使用场景）
13. 事件及时销毁（计时器之类的不会自动销毁的事件）
14. 开启 gzip 压缩

//加个代码
 npm install compression --save
 var compression = require('compression');
 var app = express();
 app.use(compression())

15. css，js库，图片等静态文件可以采用CDN
16. 重绘与回流之间的协调
17. 防抖与回流处理重复事件
18. 浏览器缓存（访问一个网站后，浏览器会对JS和CSS去进行缓存）

（还不三连 点赞 收藏 投个币 （哈哈哈））