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 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 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语法(3)
2006/10/09 PHP
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python 内置模块详解
2019/01/01 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
pytorch 常用线性函数详解
2020/01/15 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
推普周活动总结
2014/08/28 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
导游词之张家界
2019/10/31 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python