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 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
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源代码
2006/10/09 PHP
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php实现文件下载更能介绍
2012/11/23 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
php表单敏感字符过滤类
2014/12/08 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
web打印小结
2017/01/11 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Python批量按比例缩小图片脚本分享
2015/05/21 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
django解决跨域请求的问题详解
2019/01/20 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
《梅花魂》教学反思
2016/02/18 职场文书