vue项目的优化

Posted 勇敢*牛牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目的优化相关的知识,希望对你有一定的参考价值。

vue项目的优化

代码层面的优化

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 浏览器缓存
为了提高用户加载页面的速度,对静态资源进行缓存是非常必要的。

以上是关于vue项目的优化的主要内容,如果未能解决你的问题,请参考以下文章

Vue 项目性能优化

你有对 Vue 项目进行哪些优化?

vue-grid-layout数据可视化图表面板优化过程所遇问题汇总

Vue项目的一些优化策略

vue/cli2.0优化

项目优化问题