vue代码分块和懒加载非必要资源文件


Posted in Vue.js onApril 11, 2022

前端开发中,随着业务和页面增加,以组件为基本单位的结构下,组件数量会增长极快,为了优化我们会很显然地想要进行一些工作:

  • 代码分块
  • 懒加载非必要资源文件

非必要资源,指的首次渲染出某页面所不必要的资源,如因为用户操作才出现的图片、弹窗等。

代码分块和懒加载在页面层面具有极大的优化作用,用户很可能只是浏览dashboard页面,可能根本就不会去看详情等页面,那我们就不必将详情页面的代码和dashboard页面代码混在一起,用户看某个页面时只加载那个页面对应的资源即可,可以较大地提升用户体验。本文就在Vue工程下如何在组件层面配置代码分块和懒加载进行讲解。

本文在@vue/cli 3以上版本。

懒加载组件

一般来说,Vue中使用某组件过程大致如下:

<script>
// Home.vue
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  components: {
    HelloWorld,
  },
}
</script>

这是我们最熟悉的方式了,我们在访问Home.vue时,Webpack为我们保证了HelloWorld.vue一定是存在的,这是由依赖关系决定的(Home.vue依赖于HelloWorld.vue)。

这很正常对吧,但是如果HelloWorld.vue是非必要资源呢,比如需要用户点击一个按钮才会出现的弹窗或者是默认隐藏的内容,只当某些条件触发时才出现的页面区域呢?如果是上述情况,当我们访问Home.vue时显然没必要马上就将HelloWorld.vue请求过来,而且配置方法也及其简单:

<template>
  <div class="home">
    <button @click="() => showHello = true">Hello</button>
    <HelloWorld v-if="showHello" />
  </div>
</template>
<script>
// Home.vue
export default {
  components: {
    HelloWorld: () => import('@/components/HelloWorld.vue'),  // A
  },
  data() {
    return {
      showHello: false,
    }
  },
}
</script>

只需像A行一样简单处理一下即可一举两得:HelloWorld.vue会被打包成独立为单独的js文件,而且只有当我们点击按钮时,这个独立的js文件才会被请求,这样能够减小主代码块的体积。

简单分析一下:import()会返回一个组件Promise,现在基本上所有的打包工具都理解此语法,而且还会触发Webpack的代码分块(Webpack 2之后)。

注意:Vue不会在意某个组件,直到它要被渲染出来。以上例来说,只有当我们触发了按钮,HelloWorld.vue才有了意义。

即使所有组件都可以配置懒加载,但是别滥用,大部分情况下只对非必要资源配置懒加载即可,像上例如果HelloWorld.vue是Home.vue中是一直存在的,那样配置懒加载可能会适得其反,加载了Home.vue对应的js文件后会马上请求HelloWorld.vue对应的js文件,如果HelloWorld.vue对应的js文件比较小,那得到的收益可能不足以抵消一次http请求带来的消耗。

问题与解决方案

组件懒加载虽然好处极多,但仍有缺陷,如上例点击按钮后需等待HelloWorld.vue对应的js文件被请求执行后页面才会做出相应变化,这就涉及到加载状态和错误状态的处理(虽然一般情况下不会有问题,因为都是些小文件,加载极快,但也有例外),所幸Vue也为我们考虑到了这些:

加载中组件

<script>
// Home.vue
import LoadingComponent from '@/components/Loading'
export default {
  components: {
    HelloWorld: () => ({
      component: import('@/components/HelloWorld.vue'),
      loading: LoadingComponent,  // 加载HelloWorld.vue对应js文件中展示
      delay: 300,                 // loading的延迟生效时间
    }),
  },
  data() {
    return {
      showHello: false,
    }
  },
}
</script>

从用户体验方面来说,般来说500ms内的响应时间还不至于失去用户的注意力,所以可以为loading配置一个延迟时间,默认200ms内加载完成不会出现loading,当然也可以像上面一样手动设置一下delay,单位ms。

错误处理组件

<script>
// Home.vue
import ErrorComponent from '@/components/Error'
export default {
  components: {
    HelloWorld: () => ({
      component: import('@/components/HelloWorld.vue'),
      error: ErrorComponent,  // 加载HelloWorld.vue对应js文件失败时展示,如文件不存在
      timeout: 2000,          // 文件加载的超时时间,超出时间未加载完成,会触发ErrorComponent
    }),
  },
  data() {
    return {
      showHello: false,
    }
  },
}
</script>

出现错误的情形主要有以下几点:

  • 网络连接不通 / 服务器错误
  • 文件不存在(特别注意重新部署后之前版本的文件被删除,而用户还未刷新页面)
  • 加载超时(默认是没有超时时间的,不过可以像上面一样通过timeout属性配置,单位ms)

preload 和 prefetch

Vue还为资源文件配置了预加载策略,即使用<link rel="prefetch">和<link rel="preload">策略,在build后的index.html文件中或者开发模式下浏览器的Network面板里可以具体查看。关于两者的具体用法这里就不赘述了,这里说一下两者差异之处:preload的优先级比prefetch的高,一般来说当前页面的必要资源可以使用preload策略,当前页面的非必要资源和其他页面的资源使用prefetch策略。

通过配置资源预加载,浏览器为我们预先预先加载资源,在用户用到某些资源时可以及时响应,可以在提升首次加载性能的同时为用户后续的操作提供良好的体验。

prefetch在Safari中暂时还不支持,所以懒加载在Safari中表现地相对较差。

总结

Vue中使用懒加载和代码分块对产品进行优化,简单实用,但是这其中存在着权衡,如果项目较小,打包文件并不大,则可能不需要进行代码分块和懒加载,毕竟http请求也是挺贵的。

当项目较大时,使用懒加载和代码分块就可以显著地提升性能,但是同样注意那需要由后来的请求弥补的,但所幸目前大部分浏览器都支持资源预加载策略,搭配使用效果更佳。

Vue.js 相关文章推荐
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vuex的使用步骤
Jan 06 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue打包时去掉所有的console.log
三种方式清除vue路由跳转router-link的历史记录
Apr 10 #Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 #Vue.js
vue实力踩坑之push当前页无效
Apr 10 #Vue.js
vue实现Toast组件轻提示
Apr 10 #Vue.js
vue自定义右键菜单之全局实现
Apr 09 #Vue.js
vue判断按钮是否可以点击
Apr 09 #Vue.js
You might like
php基础知识:类与对象(1)
2006/12/13 PHP
PHP中ADODB类详解
2008/03/25 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
跟老齐学Python之正规地说一句话
2014/09/28 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
详解Python中for循环是如何工作的
2017/06/30 Python
用python生成1000个txt文件的方法
2018/10/25 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
python实现文字版扫雷
2020/04/24 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
大学生自我鉴定范文模板
2014/01/21 职场文书
团购业务员岗位职责
2014/03/15 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
青奥会口号
2014/06/12 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
西游降魔篇观后感
2015/06/15 职场文书
高中团支书竞选稿
2015/11/21 职场文书