引入问题

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

原因：
脚手架默认把所有组件集中打包为一个巨大的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

vue——懒加载（异步延迟和彻底懒加载）相关推荐

Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
vue 如何处理两个组件异步问题_Vue异步组件处理路由组件加载状态的解决方案...
vue.js 组件组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般 ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...
jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
vue按需加载组件_微人事首页加载速度提高了 5 倍，我都做了什么？
「本文之前发过,但是比较零散,这里我把用到的方案都汇总一下,方便大家索引,有需要的小伙伴可以收藏下方便查找.里边提到的几种方案,大家都可以对照着视频试一下」 ElementUI 按需加载: 服务端开启 ...
【vue-treeselect】数据量大的时候懒加载并且可以搜索，树懒加载+搜索
这两天快被这个懒加载加搜索搞崩溃了今天小有收获,后面优化了再更新主要说一下一棵树如何懒加载和搜索 1.ref不解释了,和本次代码无关 2.normalizer格式化内容不重要 3.load-opt ...
什么事图片懒加载？如何实现图片懒加载？
随着移动设备和网络技术的不断发展,网页设计也在不断地进化.其中,一项重要的技术就是图片懒加载(Lazy Load),它可以提高网站的加载速度和用户体验.本文将深入探讨图片懒加载的定义.原理.优势.实现 ...
python怎么加载图片-python爬虫--图片懒加载
图片懒加载是一种反爬机制,图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解 ...

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

vue项目优化之懒加载

引入问题

一、默认: 异步延迟加载

结果图解

二、彻底懒加载（手动配置）

步骤

1. 实现异步延迟加载的两步

2. 配置脚手架，去掉prefetch

结果图解

vue——懒加载（异步延迟和彻底懒加载）相关推荐

最新文章

热门文章