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
