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 相关文章推荐
JavaScript函数的4种调用方法详解
Apr 22 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 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网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
layui表格设计以及数据初始化详解
2019/10/26 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python Socket编程入门教程
2014/07/11 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
如何利用Python 进行边缘检测
2020/10/14 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
大学生通用个人自我评价
2014/04/27 职场文书
垃圾桶标语
2014/06/24 职场文书
技术经济专业求职信
2014/09/03 职场文书
员工辞职信怎么写
2015/02/27 职场文书
超强台风观后感
2015/06/09 职场文书
运动会班级前导词
2015/07/20 职场文书
会议简报格式范文
2015/07/20 职场文书
全民创业工作总结
2015/08/13 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android