Vue中使用import进行路由懒加载的原理分析


Posted in Vue.js onApril 01, 2022

使用import进行路由懒加载的原理

首先我们来说说,import 和 require 的区别

node 编程中最重要的思想就是模块化,import 和 require 都是被模块化所使用。

(1)遵循规范

  • require是 AMD规范引入方式
  • import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法

(2)调用时间

  • require是运行时调用,所以require理论上可以运用在代码的任何地方
  • import是编译时调用,所以必须放在文件开头

(3)本质

  • require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量
  • import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require

在路由中,我们如何使用懒加载呢?

export default new VueRouter({
    routes: [
        {
            path: '/',
            component: () => import('../components/Navigator')
        }
    ]
})

使用路由懒加载的写法,只会在进入当前这个路由时候才会走 component ,然后在运行import编译加载相应的组件。

可以理解也是为通过Promise的resolve机制。因为Promise函数返回的Promise为resolve组件本身,而我们又可以使用import来导入组件。

注意:import会返回一个Promise对象。

setTimeout(() => {
    import('./dynamic-data.js').then(res => {
        console.log(res.default.message)
    })
}, 1500)
// dynamic-data.js
export default {
    message: 'this is message'
}

vue路由懒加载,使用import无法处理

问题原因:import属于异步引用组件,需要特殊的babel-loader处理

解决

npm i babel-plugin-syntax-dynamic-import -D

在 .bablerc中引入syntax-dynamic-import插件

{
    "presets": ["env"],
    "plugins": ["syntax-dynamic-import"]
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
vue 插槽简介及使用示例
Nov 19 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 #Vue.js
vue ref如何获取子组件属性值
Mar 31 #Vue.js
vue如何使用模拟的json数据查看效果
vue+iview实现手机号分段输入框
Mar 25 #Vue.js
Vue3中toRef与toRefs的区别
Mar 24 #Vue.js
一起来看看Vue的核心原理剖析
Mar 24 #Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 #Vue.js
You might like
人族 Terran 魔法与科技
2020/03/14 星际争霸
validator验证控件使用代码
2010/11/23 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
javascript定时器完整实例
2015/02/10 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
override和overload的区别
2016/03/09 面试题
会计电算化专业毕业生推荐信
2013/12/24 职场文书
2014村务公开实施方案
2014/02/25 职场文书
大学军训感言600字
2014/02/25 职场文书
搞笑征婚广告词
2014/03/17 职场文书
培训研修方案
2014/06/06 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
顶岗实习协议书
2015/01/29 职场文书
护林员个人总结
2015/03/04 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
试了下Golang实现try catch的方法
2021/07/01 Golang