总结4个方面优化Vue项目

标签: jianshu | 发表时间:2019-10-27 00:00 | 作者:
出处:http://itindex.net/relian

运行时优化

1、使用v-if代替v-show

两者的区别是:v-if不渲染DOM,v-show会预渲染DOM

除以下情况使用v-show,其他情况尽量使用v-if

有预渲染需求

需要频繁切换显示状态

2、v-for必须加上key,并避免同时使用v-if

一般我们在两种常见的情况下会倾向于这样做:

为了过滤一个列表中的项目
比如 v-for="user in users" v-if="user.isActive"。在这种情形下,请将 users替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表

为了避免渲染本应该被隐藏的列表
比如 v-for="user in users" v-if="shouldShowUsers"。这种情形下,请将 v-if 移动至容器元素上 (比如 ul, ol)

3、事件及时销毁

Vue组件销毁时,会自动清理它与其它实例的连接,解绑它的全部指令及事件监听器,但是仅限于组件本身的事件。

也就是说,在js内使用addEventListener等方式是不会自动销毁的,我们需要在组件销毁时手动移除这些事件的监听,以免造成内存泄露,如:

  created() {
 addEventListener('touchmove', this.touchmove, false)
},
beforeDestroy() {
 removeEventListener('touchmove', this.touchmove, false)
}

首屏优化

1、图片裁剪、使用webp

  • 图片需要裁剪,一般使用二倍图即可
  • 尽量使用webp图片
  • 如果使用了vue-lazyload插件,可以使用以下方法一键替换webp(替换使用v-lazy指令的图片)
  Vue.use(VueLazyload, {
 error: require('./assets/img/defaultpic_small.png'),
 filter: {
 webp (listener: any, options: any) {
 if (!options.supportWebp) return
 // listener.src += '.webp'
 }
 }
});

2、资源提前请求

经测试,Vue项目中各文件的加载顺序为:router.js、main.js、App.vue、[-page-].vue、[component].vue,如图:


其中,router的加载时间相比于page.vue快近100ms,如果page.vue的文件较多,时间差异会更大
所以,可以在页面挂载、渲染的同时去请求接口数据,如在router.js中请求数据:

  import Router from 'vue-router'
import store from './store'
 
store.dispatch('initAjax')

3、异步路由

使用异步路由可以根据URL自动加载所需页面的资源,并且不会造成页面阻塞,较适用于移动端页面

建议主页面直接import,非主页面使用异步路由

使用方式:

  {
 path: '/order',
 component: () => import('./views/order.vue')
}

4、异步组件

不需要首屏加载的组件都使用异步组件的方式来加载(如多tab),包括需要触发条件的动作也使用异步组件(如弹窗)
使用方式为:v-if来控制显示时机,引入组件的Promise即可

  <template>
 <div>
 <HellowWorld v-if="showHello" />
 </div>
</template>
<script>
export default {
 components: { HellowWorld: () => import('../components/HelloWorld.vue') },
 data() {
 return {
 showHello: false
 }
 },
 methods: {
 initAsync() {
 addEventListener('scroll', (e) => {
 if (scrollY > 100) {
 this.showHello = true
 }
 })
 }
 }
}
</script>

5、使用轻量级插件、异步插件

使用webpack-bundle-analyzer查看项目所有包的体积大小,较大的插件包尽量寻找轻量级的替代方案

首屏用不到的插件、或只在特定场景才会用到的插件使用异步加载(如定位插件,部分情况可以通过URL传递经纬度;或生成画报插件,需要在点击时触发);插件第一次加载后缓存在本地,使用方式为:

  // 以定位插件为例
const latitude = getUrlParam('latitude')
const longitude = getUrlParam('longitude')
// 如果没有经纬度参数,则使用定位插件来获取经纬度
if (!latitude || !longitude) {
 // 首次加载定位插件
 // webpack4写法,若使用webpack3及以下,则await import('locationPlugin')即可
 if (!this.WhereAmI) this.WhereAmI = (await import('locationPlugin')).default
 // do sth...
}

6、公用CDN

使用公用的CDN资源,可以起到缓存作用,并减少打包体积

网络优化

1、减少网络请求

浏览器对同一时间针对同一域名下的请求有一定数量限制(一般是6个),超过限制数目的请求会被阻塞
首屏尽可能减少同域名的请求,包括接口和js;按需减少首屏的chunk.js,合并接口请求

2、合理使用preload、dns-prefetch、prefetch

  • preload具有较高的加载优先级,它可以利用间隙时间预加载资源,将加载和执行分离开,不阻塞渲染和document的onload事件
  • 每次与域名连接都需要进行DNS解析,使用dns-prefetch可以预解析域名的DNS
  • prefetch会预加载页面将来可能用到的一些资源,优先级较低;对首屏渲染要求较高的项目不建议使用

三者的使用方式,在head标签中添加(vue-cli-3已经做了相应配置):

  <head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" href="/dist/favicon.ico" rel="external nofollow" />
 <!-- dns-prefetch写法 -->
 <link rel="dns-prefetch" href="//www.dpfile.com" rel="external nofollow" />
 <title>md-config</title>
 <!-- preload写法,as属性必须 -->
 <link href="/dist/css/app.52dd885e.css" rel="external nofollow" rel="preload" as="style" />
 <link href="/dist/js/app.05faf3b5.js" rel="external nofollow" rel="preload" as="script" />
 <link href="/dist/js/chunk-vendors.04343b1f.js" rel="external nofollow" rel="external nofollow" rel="preload" as="script" />
 <!-- prefetch写法 -->
 <link href="/dist/js/chunk-vendors.04343b1f.js" rel="external nofollow" rel="external nofollow" rel="prefetch" />
</head>

3、PWA

PWA支持缓存HTML文档、接口(get)等,降低页面白屏时间
这样即使在弱网甚至断网情况下,也能迅速展示出页面

编译打包优化

1、升级Vue-Cli-3

vue-cli-3采用webpack4+babel7,对编译打包方面做了很多优化(成倍的提升),使用yarn作为包管理工具,并且对很多优化的最佳实践做了默认配置

经测试,将项目从vue-cli-2迁移到vue-cli-3之后,速度变化为:

编译时间:44s --> 7s
打包时间:55s --> 11s

效率提升非常明显

2、SSR

对加载性能要求较高的项目建议升级SSR

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈: 866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。


相关 [优化 vue 项目] 推荐:

总结4个方面优化Vue项目

- - IT瘾-jianshu
1、使用v-if代替v-show. 两者的区别是:v-if不渲染DOM,v-show会预渲染DOM. 除以下情况使用v-show,其他情况尽量使用v-if. 2、v-for必须加上key,并避免同时使用v-if. 一般我们在两种常见的情况下会倾向于这样做:. 为了过滤一个列表中的项目. 比如 v-for="user in users" v-if="user.isActive".

浅谈Vue组件在实际项目中的应用

- - JDC | 京东设计中心
Vue.js 是一套构建用户界面的渐进式框架,目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 虽然目前 Vue 已经很火了,但不可否认的是,仍有很多人刚刚开始学习使用 Vue 来构建前端项目,从生疏的初学者到熟练运用 Vue 的过程中,不可避免地会走一些弯路. 为了实现某个功能,也许尝试过很多方法,最终蓦然回首,才发现当初犯下的错误是那么幼稚.

PHP项目性能优化

- - SegmentFault 最新的文章
PHP项目性能优化的三个层次. PHP周边(服务器,数据库,webserver). 尽量使用PHP原生函数和常量,类. 如果要实现的功能有原生PHP函数,则不要自己用PHP实现. 尽量使用性能更高的内置函数. 比如isset和array_key_exists都可以使用,则使用isset. 尽量不要使用错误抑制符@.

优化 RequireJS 项目(合并与压缩)

- - 博客 - 伯乐在线
英文原文: Optimize (Concatenate and Minify) RequireJS Projects,编译: oschina. 本文将演示如何合并与压缩一个基于RequireJS的项目. 本文中将用到苦干个工具,这其中就包括 Node.js. 因此,如果你手头上还没有Node.js可以 点击此处下载一个.

项目性能优化经验--ZY(三)

- - 行业应用 - ITeye博客
读写分离,不是想做就做的,说分就分的,随便找个中间件把请求一转发就OK的. 比如,在项目中有个模块是购物车(现在的电子商务一般都需要存储购物车内容,因为存在PC,MOBILE等不同的终端),客户先点击添加购物车,然后结算(这时候会做个判断购物车是否有商品),在大并发情况下,mysql的读库和写库的同步(beanlog)严重的delay,导致购物车一直判断为空,订单无法下.

项目性能优化经验--ZY(二)

- - 行业应用 - ITeye博客
项目中,用了很多的LAZY级联,在页面用到的时候再去load,这样就使用Open Session In View的功能,在大并发且网络不好的情况下,会导致session迟迟不能释放(session要等页面request请求完全结束之后才close),即connection也没法释放. 之前项目都是使用EAGER,JSON数据传递的方式来处理,整个连接池太小不过100就能顶住1000+的并发下单.

项目性能优化经验--ZY项目

- - 行业应用 - ITeye博客
最近负责给公司某个ZY项目进行性能优化的一些经验分析. 压力测试到100并发,任何一个场景CPU暴高,接近100%. 查询jstack日志,发现大部分的线程block在tomcat 的 http11.connect 的poll方法上 或者是c3p0连接池的获取上. 同时发现该项目数据库连接池配置了2000+,仍然不够用,100并发.

微豆 - Vue 2.0 实现豆瓣 Web App 教程

- - SegmentFault 最新的文章
一个使用 Vue.js 与 Material Design 重构 豆瓣 的项目. 项目网站 http://vdo.ralfz.com/. # 克隆项目到本地 git clone https://github.com/RalfZhang/Vdo.git # 安装依赖 npm install # 在 localhost:8080 启动项目 npm run dev.

vue快速入门的三个小实例

- - SegmentFault 最新的文章
用vue做项目也有一段时间了,之前也是写过关于vue和webpack构建项目的相关文章,大家有兴趣可以去看下 webpack+vue项目实战(一,搭建运行环境和相关配置)(这个系列一共有5篇文章,这是第一篇,其它几篇文章链接就不贴了). 但是关于vue入门基础的文章,我还没有写过,那么今天就写vue入门的三个小实例,这三个小实例是我刚接触vue的时候的练手作品,难度从很简单到简单,都是入门级的.

vue父子组件通信高级用法

- - SegmentFault 最新的文章
vue项目的一大亮点就是组件化. 使用组件可以极大地提高项目中代码的复用率,减少代码量. 但是使用组件最大的难点就是父子组件之间的通信. . . // 参数就是子组件传递出来的数据.