Vue中使用import进行路由懒加载的原理分析
目录
使用import进行路由懒加载的原理
（1）遵循规范
（2）调用时间
（3）本质
vue路由懒加载，使用import无法处理
解决
使用import进行路由懒加载的原理首先我们来说说，import 和 require 的区别
node 编程中最重要的思想就是模块化，import 和 require 都是被模块化所使用。
（1）遵循规范require是 AMD规范引入方式
import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头
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"]
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
