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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
动态为事件添加js代码示例
Feb 15 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
JavaScript闭包详解
Feb 02 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 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
js中的replace方法使用介绍
2013/10/28 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
房地产还款计划书
2014/01/10 职场文书
优秀教师先进材料
2014/12/16 职场文书
写给医院的感谢信
2015/01/22 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS