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-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue操作Storage本地化存储
Apr 29 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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
工程材料采购方案
2014/05/18 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
作风建设年度心得体会
2014/10/29 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
单位介绍信格式范文
2015/05/04 职场文书
银行培训心得体会范文
2016/01/09 职场文书
公开致歉信
2019/06/24 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL