vue项目的优化

Posted 2022-10-03 勇敢*牛牛

vue项目的优化

• • 代码层面的优化
  • • vue代码层面的优化
  • Webpack 层面的优化
  • 基础的 Web 技术优化

代码层面的优化

vue项目的优化分为三部分：

• Vue 代码层面的优化
• webpack 配置层面的优化
• Web 技术层面的优化

vue代码层面的优化

1 v-for 遍历为 item 添加 key
在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。

2 v-for 遍历避免同时使用 v-if
v-for 比 v-if 优先级高，这意味着 v-if 将分别重复运行于每个 v-for 循环中，将会影响速度。建议替换成 computed 属性。

3 v-if 和 v-show 区分使用场景
v-if 是真正的条件渲染，也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行样式切换。
v-if 适用于很少改变条件，不需要频繁切换的场景；v-show 则适用于需要非常频繁切换的场景。

4 computed 和 watch 区分使用场景
computed 计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch 更多的是观察的作用，每当监听的数据变化时都会执行相关回调。

当需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，watch 允许我们执行异步操作。

5 keep-alive
利用keep-alive包裹，将不活动的组件缓存起来。
在组件切换过程中将状态保留在内存中，防止重复渲染dom，减少加载时间及性能消耗，提高用户体验。

6 图片资源懒加载（使用插件）
对于图片过多的页面，为了加快页面加载速度，可以将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件。

7 路由懒加载
路由过多，加载的资源过多，页面会出现白屏的情况，不利于用户体验。所以我们把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件：
8组件懒加载

在 vue-router 配置路由的时候，采用动态加载路由的形式：

routes:[ 
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')
]

以这种函数的形式加载路由，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会加载路由组件。

9 第三方库按需引入
在日常使用UI框架，例如element-UI、iView，我们经常性直接引用整个UI库。但实际上我用到的组件只有按钮，分页，表格等很少一部分，所以我们要按需引用：

import  Button, Input, Pagination  from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

Webpack 层面的优化

1 Webpack 对图片进行压缩
对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader 来压缩图片

2 模板预编译
打包时，直接把组件中的模板转换为render函数，这叫做模板预编译。这样一来，运行时就不再需要编译模板了，提高了运行效率。

基础的 Web 技术优化

1 浏览器缓存
为了提高用户加载页面的速度，对静态资源进行缓存是非常必要的。