原因是组件之间的依赖关系太多，或者组件的渲染过程太复杂，导致渲染时间过长解决方法可以通过懒加载的方式来解决，懒加载可以把组件分成几个块，按需加载，减少首屏渲染的组件数量，提高页面渲染速度。

所以为了减少vendorjs的文件大小，把这个做成了懒加载，如下这是打包后生成的包含hls的文件 实际使用的时候，先加载项目基本的jsvenderjs，indexjs，后面的播放视频的时候，才请求hls相关的js文件。

在 Vue2 中，异步组件和路由懒加载处理使用 import 就可以很轻松实现但是在 Vue 3x 中异步组件的使用与 Vue 2x 完全不同了本文就详细讲讲 vue3 中 异步组件 和 路由懒加载 的实现所以，下面的。

前言懒加载也就是延迟加载，不知道大家在工作中有没有发现，当你的SPA单页应用程序变得复杂时，打包构建后的Javascript包会变得非常大，以至于严重影响页面的加载时间幸运的是vuerouter支持WebPack内置的异步模块加载。

所以将JS文件拆开，点击某个页面时再加载该页面的JS是一个很好的优化方法 这里用到的就是vue的组件懒加载在routerjs中，不要使用import的方法引入组件，使用requireensureimport index from #39@componentsindex#39const。

通过自定义指令 vlazy 将设置背景图的元素或者 img元素，通过 _addListenerTarget 方法收集与数组 TargetQueue 中，并遍历触发懒加载的方法， addEventListener 绑定在该元素上，触发的事件为 lazyLoadHandler。

vue由静态路由改为动态路由时，出现下面的错误 静态路由懒加载，当我们把router写死import里面它是正常加载的，可是我们通过api接口拉取过来的数据时，发现是不报了上面的错export const importPath = comUrl =。