本篇文章为大家展示了Vue 中怎么惰性加载加一个进度条，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联公司是专业的新泰网站建设公司，新泰接单;提供网站制作、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行新泰网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
为什么要按需加载?
Vue.js 中 SPA 的典型工作方式是将所有功能和资源打包一并交付，这样可以使用户无需刷新页面即可使用你的应用。如果你没有为了按需加载页面针对自己的应用进行明确的设计，那么所有的页面会被立即加载，或者提前使用大量内存进行不必要的预加载。
这对有许多页面的大型 SPA 非常不利，会导致使用低端手机和低网速的用户体验会很差。如果通过按需加载，用户将不需要下载他们当前不需要的资源。
Vue.js 没有为动态模块提供任何加载指示器相关的控件。即使进行了预取和预加载，也没有对应的空间让用户知道加载的过程，所以还需要通过添加进度条来改善用户体验。
准备项目
首先需要一种让进度条与 Vue Router 通信的方法。事件总线模式比较合适。
事件总线是一个 Vue 实例的单例。由于所有 Vue 实例都有一个使用 $on和 $emit的事件系统，因此可以用它在应用中的任何地方传递事件。
首先在 components 目录中创建一个新文件 eventHub.js：
import Vue from 'vue' export default new Vue()
然后把 Webpack 配置为禁用预取和预加载，这样就可以针对每个函数单独执行此类操作，当然你也可以全局禁用它。在根文件夹中创建一个 vue.config.js 文件并添加禁用预取和预加载的相关配置：
module.exports = { chainWebpack: (config) => { // 禁用预取和预加载 config.plugins.delete('prefetch') config.plugins.delete('preload') }, }添加路由和页面
用 npx 安装 Vue router 并使用：
$ npx vue add router
编辑位于 router/index.js 下的 router 文件并更新路由，以便可以用 import() 函数代替 import 语句：
以下默认配置：
import About from '../views/About.vue' { path: '/about', name: 'About', component: About },将其改为：
{ path: '/about', name: 'About', component: () => import('../views/About.vue') },如果希望可以选择按需加载某些页面，而不是全局禁用预取和预加载，可以用特殊的 Webpack 注释，不要在 vue.config.js 中配置 Webpack：
import( /* webpackPrefetch: true */ /* webpackPreload: true */ '../views/About.vue' )
import() 和 import 之间的主要区别是在运行时加载由 import() 加载的 ES 模块，在编译时加载由 import 加载的 ES 模块。这就意味着可以用 import() 延迟模块的加载，并仅在必要时加载。
实现进度条
由于无法准确估算页面的加载时间(或完全加载)，因此我们无法真正的去创建进度条。也没有办法检查页面已经加载了多少。不过可以创建一个进度条，并使它在页面加载时完成。
由于不能真正反映进度，所以描绘的进度只是进行了随机跳跃。
先安装 lodash.random，因为在生成进度条的过程中将会用这个包产生一些随机数：
$ npm i lodash.random
然后，创建一个 Vue 组件 components/ProgressBar.vue：
