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

天才和人才就差了二

于 2021-08-09 16:51:11 发布

阅读量1.4k

点赞数 1

分类专栏：前端 vue

本文链接：https://blog.youkuaiyun.com/wenhui6/article/details/119541414

版权

19 篇文章

订阅专栏

10 篇文章

订阅专栏

本文介绍了如何通过设置异步加载和路由别名来优化前端应用的性能。异步路由使得首屏加载更快，仅在访问特定路由时加载对应资源，如a路由对应的name.js。路由别名则允许自定义chunk名称，便于管理和理解。通过这种方式，可以显著减少初始加载的js大小，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、异步加载设置

// 无异步的路由
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

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