vue——懒加载（异步延迟和彻底懒加载）

引入问题

单页面应用的致命问题： 首屏加载极慢

原因：
脚手架默认把所有组件集中打包为一个巨大的app.js文件,
在首屏一次性全部下载。

---

本章教程皆以Vue脚手架初始示例为例：

npm run serve:
这里的app.js就包含了所有的组件（Home.vue和About.vue),此时文件大小124KB《
npm run build:(打包项目)
可以看到app.js中也会包含所有组件

---

所以我们应该采用优化策略——懒加载
(用户想看什么就只下载什么，用户暂时不想看的，就没必要下载！)

一、默认: 异步延迟加载

定义：
先下载并显示首页内容。其它页面组件在不影响主屏下载速度的情况下进行 异步下载

优点： 既加快首屏加载的速度，又能享受单页面应用带来的好处。
缺点: 偷跑流量

步骤：

1. 千万不要在router/index.js开头过早的引入除首页之外的其它页面组件。
   凡是用Import引入的东西，vue都会打包在app.js中，在首屏下载。

2. 改造路由字典项：

		{
			  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