vue懒加载———javascript如何动态加载模块？

javascript如何动态加载模块？

python和JavaScript都是通过import去导入其他包或者模块，而我们的编译器在编译时候会直接处理import语句，所以自然就导致import最先就执行了，但是这样有个问题，如果某些模块的加载只是在特定操作下才用得到，那么如果用户打开页面就加载这些模块，造成了时间的浪费，所以有了动态加载。

if (x === 3) {
  import profile from './profile/Profile';
}

以上代码会报错，就算不报错也会直接最先执行impory语句。
那么如何动态的加载模块呢？用import()代替import即可

const profile = () => import('./profile/Profile')

这个时候,我们定义了一个profile函数
而只有在执行profile()时，才会导入模块。
具有这样的功能的有require,意思就是在运行的时候才执行，上一篇v-bind绑定src中就用到了require

那么应用在哪呢？

import Vue from 'vue'
import VueRouter from "vue-router";
const Home = () => import('../views/home/Home')
const Shopcart = () =>import('../views/shopcart/Shopcart')
const Category = () => import('../views/category/Category')
const Profile = () => import('../views/profile/Profile')

上面就使用了import()，并且是箭头函数的形式，函数名分别为Home,Shopcart,Category,Profile，而在vue的路由中，我们的路由对象是这么写的

const routes = [
  {
    path:'',
    redirect: '/home',
  },
  {
    path:'/home',
    component: Home,
  },
  {
    path:'/category',
    component: Category,
  },
  {
   path: '/home',
   component: Shopcart,
  },
  {
    path:'/profile',
    component: Profile,
  }
]

为什么component后面对应的是不带括号的函数名？
因为如果加了括号，那么就是执行函数，并返回对应的值，但不加括号就是引用，在这里是只有到对应的路由时，才会调用函数。而这个函数返回的是一个对象，为promise对象