vue项目优化懒惰加载引入问题1、缺省：异步延迟加载结果图解2、完全懒惰加载(手动配置)步骤1、实现异步延迟加载的步骤2、搭设脚手架，去掉prefetch结果图解
问题的导入
单页面APP致命问题：首屏加载极慢
原因：
缺省情况下，脚手架将所有组件打包到一个巨大的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:'/相对路径'，//使用匿名函数打包组件： (=import )//段名称：自定义js文件名. XXX.js/* webpackchunknet
npm run build（打包项目）：
使用异步延迟，您可以看到打包的js分为两部分： About.xxx.js和Home.xxx.js
延迟异步加载的文件后，rel=' prefetch ':http://www.Sina.com /
异步先获得，但不需要立刻加载显示
在首页也异步下载两个js文件。 一个是Home.vue组件，114KB；一个是About.vue组件，12.6KB
此时突出缺点：npm run serve：
二.彻底懒惰加载(手动部署)用户未点开About组件但已经下载，浪费流量
如果用户不请求以下页面组件，则不会预先下载其他页面组件
定义：节约流量。
优点：第一次切换页面时需要临时下载页面组件，这可能会变慢
步骤1 .实现异步延迟加载2步骤I .不提前部署
ii.component成为匿名箭头函数
{ path:'/相对路径'，//使用匿名函数打包组件： (=import )//段名称：自定义js文件名. XXX.js/* webpackchunknet
在ii.vue.config.js中添加以下固定代码
iii.3360强调必须重新启动NPM运行服务器
module.exports={ chain web pack : config={ config.plugins.delete (' prefetch ' ) index.html开头的具有prefetch属性的link //
dist/js的js文件与异步延迟加载一样保持为两个
但是，在index.html中rel='prefetch '属性的link很少
缺点：
打开首页时，仅下载app.js文件(Home组件)
切换到about组件时，将开始下载About.js