vue路由组件按需加载的几种方法小结


Posted in Javascript onJuly 12, 2018

1. 普通加载

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如:

import Hello from '@/components/Hello'
import Boy from '@/components/Boy'
import Girl from '@/components/Girl'

这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题,需要将他分成多个小文件,而且还要实现异步按需加载,即用到了再加载,而不用一股脑全部加载

2. webpack的require.ensure()实现按需加载

语法:require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)

  1. dependencies:字符串构成的数组,声明 callback 回调函数中所需的所有模块,模块作为依赖被加载
  2. callback:只要加载好全部依赖,webpack 就会执行此函数。require 函数的实现,作为参数传入此函数。当程序运行需要依赖时,可以使用 require() 来加载依赖。函数体可以使用此参数,来进一步执行 require() 模块。
  3. errorCallback:当 webpack 加载依赖失败时,会执行此函数。
  4. chunkName:由 require.ensure() 创建出的 chunk 的名字。通过将同一个 chunkName 传递给不同的 require.ensure() 调用,我们可以将它们的代码合并到一个单独的 chunk 中,从而只产生一个浏览器必须加载的 bundle。

使用方法一:

require.ensure([], function(require){
  require('./a.js');
});
// 此时会单独打包出一个js文件,没有自定义名称的话,会被命名为1.js(有hash时候会带上md5)

使用方法二:

require.ensure(['./a.js'], function(require) {
  require('./b.js');
});

1、此时a.js作为依赖被加载,但是没有被执行(官方文档说的only loads the modules)
2、a.js和b.js会被打包成一个文件。
3、回调函数里只require了b.js,只有b.js的内容会被执行。
4、如果你需要使用a.js的内容,需要再加上require('./a.js')

require.ensure(['./list'], function(require){
  var list = require('./list');
  list.show();
});

给require.ensure的第一个参数传了['./list'],执行到这里的时候list.js会被浏览器下载下来,但是并不会执行list.js模块中的代码,也就是webpack官网说的,不会进行evaluate。真正进行evaluate的时候是到了后面这句var list = require('./list');这就是所谓的懒执行。

写在函数中的多个模块会被打包在一起,这一点和上面没有区别。另外,写在数组中的模块也会跟他们打包在一起,不管你有没有手动执行。

vue中使用

comst List = resolve => {
  require.ensure([],() => {
    resolve(require('./list'))
  },'list')
}

其实resolve的作用就是Promise里面那个resolve,在这里就是定义一个异步的组件

使用动态 import语法

const Foo = () => import(/* webpackChunkName: "foo" */ './Foo.vue');
const router = new VueRouter({
 routes: [
  { path: '/foo', component: Foo }
 ]
})
// /* webpackChunkName: "foo" */使用命名chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)
// webpack要加配置 output需要加个chunkFilename
chunkFilename: '[name].js'

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
JavaScript 数组详解
Oct 10 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
Vue声明式渲染详解
May 17 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 #jQuery
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 #Javascript
教你如何用node连接redis的示例代码
Jul 12 #Javascript
angular 内存溢出的问题解决
Jul 12 #Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 #Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 #Javascript
vue中如何实现pdf文件预览的方法
Jul 12 #Javascript
You might like
php 静态化实现代码
2009/03/20 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
js页面跳转的常用方法整理
2013/10/18 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python 多线程实现检测服务器在线情况
2015/11/25 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python判断无向图环是否存在的示例
2019/11/22 Python
python实现实时视频流播放代码实例
2020/01/11 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
广州一家公司的.NET面试题
2016/06/11 面试题
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
教学评估实施方案
2014/03/16 职场文书
完整版商业计划书
2014/09/15 职场文书
公司授权委托书范本
2014/09/18 职场文书
村主任当选感言
2015/08/01 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript