vue——懒加载(异步延迟和彻底懒加载)
vue项目优化之懒加载
- 引入问题
- 一、默认: 异步延迟加载
- 结果图解
- 二、彻底懒加载(手动配置)
- 步骤
- 1. 实现异步延迟加载的两步
- 2. 配置脚手架,去掉prefetch
- 结果图解
引入问题
单页面应用的致命问题: 首屏加载极慢
原因:
脚手架默认把所有组件集中打包为一个巨大的app.js文件,
在首屏一次性全部下载。
本章教程皆以Vue脚手架初始示例为例:
npm run serve:
这里的app.js就包含了所有的组件(Home.vue和About.vue),此时文件大小124KB《
npm run build:(打包项目)
可以看到app.js中也会包含所有组件
所以我们应该采用优化策略——懒加载
(用户想看什么就只下载什么,用户暂时不想看的,就没必要下载!)
一、默认: 异步延迟加载
定义:
先下载并显示首页内容。其它页面组件在不影响主屏下载速度的情况下进行 异步下载
优点: 既加快首屏加载的速度,又能享受单页面应用带来的好处。
缺点: 偷跑流量
步骤:
-
千万不要在
router/index.js
开头过早的引入除首页之外的其它页面组件。
凡是用Import引入的东西,vue都会打包在app.js中,在首屏下载。 -
改造路由字典项:
{
path:"/相对路径",
//使用匿名函数自调
component: ()=>import(
// 打包时的分段名:自定义js文件名.xxx.js
/* webpackChunkName: "自定义js文件名" */
"../views/页面组件.vue"
)
}
结果图解
使用异步延迟加载后:
npm run build(打包项目):
可以看到使用异步延迟后,打包后的js分为了两个,一个是About.xxx.js,一个是Home.xxx.js
异步延迟加载的文件后 rel = "prefetch"
:异步先获得,但不需要立刻加载显示
npm run serve:
在首页时也异步下载两个js文件,一个是Home.vue组件,114KB;一个是About.vue组件,12.6KB
此时突出缺点:用户未点开About组件但已经下载,浪费流量
二、彻底懒加载(手动配置)
定义:
如果用户不请求下一个页面组件,则不会提前下载其他页面组件
优点: 节约流量.
缺点: 首次切换页面时需要临时下载页面组件,可能会慢
步骤
1. 实现异步延迟加载的两步
i. 不要提前引入
ii. component变成匿名箭头函数
{
path:"/相对路径",
//使用匿名函数自调
component: ()=>import(
// 打包时的分段名:自定义js文件名.xxx.js
/* webpackChunkName: "自定义js文件名" */
"../views/页面组件.vue"
)
}
2. 配置脚手架,去掉prefetch
i 在脚手架根目录,创建vue.config.js
ii. 在vue.config.js中添加以下固定代码
iii. 强调: 必须重启npm run serve
module.exports={
chainWebpack:config=>{
config.plugins.delete("prefetch")
//删除index.html开头的带有prefetch属性的link
//不要异步下载暂时不需要的页面组件文件
}
}
结果图解
npm run build(打包项目):
dist/js
中的js文件跟异步延迟加载一样,仍为两个
但是index.html
中少了rel = "prefetch"
属性的link
npm run serve:
打开首页时,只有app.js文件下载(Home组件)
切换成About组件时,才开始下载about.js
Mues?: fatal: the remote end hung up unexpectedly Everything up-to-date 这是什么原因啊,求帮忙解答一下
你脸上有BUG: 有什么报错么
下雪了 ~: 文件一直添加不上怎么回事
风的山丘: 代码运行成功!十分感谢!
youaresohandsome: 我提交的本地分支名是 git push -u origin main