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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
JS请求servlet功能示例
Jun 01 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 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
微信开发之获取JSAPI TICKET
2017/07/07 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
vue-axios使用详解
2017/05/10 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
python基础教程之五种数据类型详解
2017/01/12 Python
Python标准库之collections包的使用教程
2017/04/27 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Python3并发写文件与Python对比
2019/11/20 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
英国行业制服供应商:Alexandra
2019/09/14 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
模范家庭事迹材料
2014/02/10 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript