.loading-container{font-size:0;位置：固定；顶部：0；左：0；高度：5px；宽度：100%；不透明度：0；显示：无；z-指数：100；过渡：不透明度200；}.loading-container.visible{显示：块；}.loading-container.loading{不透明度：1；}.loader{背景：#23d6d6；显示：内联块；高度：100%；宽度：50%；溢出：隐藏；边界半径：005px0；transition:200widthease-out;}.loader>.light{float:right;高度：100%；宽度：20%；背景图像：线性渐变（向右，#23d6d6，#29ffff，#23d6d6）；动画：loading-animation2sease-ininfinite;}.glow{display:inline-block;高度：100%；宽度：30px；左边距：-30px；边界半径：005px0；box-shadow:0010px#23d6d6;}@keyframesloading-animation{0%{margin-right:100%;}50%{右边距：100%；}100%{右边距：-10%；}}作者：StackAbuse应用时（SPA），页面加载时，JavaScript、CSS文件等所有需要的资源一起加载。在处理大文件时，这可能会导致糟糕的用户体验。使用Webpack，可以使用import()函数而不是import关键字在Vue.js中按需加载页面。为什么按需加载？SPA在Vue.js中的典型工作方式是将所有功能和资源一起打包和交付，以便用户无需刷新页面即可使用您的应用程序。如果您没有明确地将您的应用程序设计为按需页面加载，所有页面将被一次加载，或者不必要地提前使用大量内存进行预加载。这对于页面很多的大型SPA来说是非常糟糕的，导致低端手机的用户体验很差，网速也很慢。通过按需加载，用户无需下载他们当前不需要的资产。Vue.js没有为动态模块提供任何与加载指示器相关的控件。即使进行了预取和预加载，也没有相应的空间让用户知道加载过程，所以需要增加一个进度条来提高用户体验。准备项目首先需要一个进度条与VueRouter通信的方式。事件总线模式更合适。事件总线是Vue实例的单例。由于所有Vue实例都有一个使用$on和$emit的事件系统，您可以使用它在应用程序的任何地方传递事件。首先在components目录下新建一个文件eventHub.js：importVuefrom'vue'exportdefaultnewVue()然后配置webpack禁用预取和预加载，这样就可以对每个函数单独做这个了，当然你也可以全局禁用它。在根目录下创建一个vue.config.js文件并添加相关配置以禁用预取和预加载：module.exports={chainWebpack:(config)=>{//禁用预取和预加载config.plugins。delete('prefetch')config.plugins.delete('preload')},}添加路由和页面使用npx安装Vue路由器并使用：$npxvueaddrouter编辑位于router/index.js下的路由器文件并更新route，这样就可以使用import()函数来代替import语句：默认配置如下：importAboutfrom'../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，因为在生成进度条的过程中会用到这个包来生成一些随机数：$npmilodash.random然后，创建一个Vue组件components/ProgressBar.vue:class="{'loading-container':true,loading:isLoading,visible:isVisible}">
