总结4个方面优化Vue项目


Posted in Javascript onFebruary 11, 2019

运行时优化

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,如图:

总结4个方面优化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

Javascript 相关文章推荐
JavaScript 学习技巧
Feb 17 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
JavaScript 数组去重详解
Sep 15 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 #Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 #Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 #Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 #Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 #Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 #Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 #Javascript
You might like
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python中property函数用法实例分析
2018/06/04 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
个人承诺书格式
2014/06/03 职场文书
优秀大学生自荐信
2014/06/09 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
教师培训学习心得体会
2016/01/21 职场文书
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript