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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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 if 想到的些问题
2008/03/22 PHP
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
js实现翻牌小游戏
2020/07/31 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python让列表倒序输出的实例
2018/06/25 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
pycharm配置git(图文教程)
2019/08/16 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
pandas按条件筛选数据的实现
2021/02/20 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
护士实习生自我鉴定范文
2013/12/10 职场文书
园林施工员岗位职责
2013/12/11 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
授权委托书怎么写
2014/09/25 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
先进个人申报材料
2014/12/30 职场文书
小学元宵节活动总结
2015/02/06 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android