学习记录【13】VUE路由异步加载（懒加载）并起别名

一、异步加载设置

// 无异步的路由
import A from '@/views/recommend'

// 异步路由
const A = () => import('@/views/a'/* webpackChunkName: "recommend" */)

 1、如果不设置异步路由所有的js都会打包到app.js中

2、设置异步路由后，访问a路由的时候才会加载这个路由相关的js，比如控制台network的js中a路由对应的就会出现0.js类似的这种js

二、路由起别名

// 异步路由并起别名，就是加上后面的这一段/* webpackChunkName: "name" */，
// 这里的name可以根据自己的爱好改成你需要的名字

const A = () => import('@/views/a'/* webpackChunkName: "name" */)

打包后访问a路由的时候，会加载name.js，这个name.js其实就是上面没有起别名中的0.js 

 异步路由的优点就是，首屏加载速度会变快，不用一下子把所有的资源都加载出来，其他的还不晓得😂