vue-router懒的时候第一次加载资源太多导致速度慢怎么处理？

这次给大家带来的是vue-router懒加载第一次如何处理资源太多导致速度慢的问题。vue-router懒加载第一次处理资源太多导致速度慢有什么注意事项？下面是一个实际案例。让我们来看看。

对于vue这样的单页应用，如果没有懒加载的话，webpack打包的文件会特别大，导致进入首页要加载的内容太多，会导致长时间的黑屏。即使加载了，也不利于用户体验。而使用懒加载可以对页面进行划分，在必要的时候加载页面，可以有效分担主页所承受的加载压力，减少主页的加载时间。

简单来说:不一次性加载太多资源，进入首页时间太长！！！

惰性加载模式:

从“vue”导入Vue

从“vue路由器”导入路由器

Vue.use(路由器)

//采用懒加载。

导出默认新路由器({

路线:[

{

路径:“/”，

component:resolve = & gt；要求(['@/components/index']，解析)

}

]

})非延迟加载模式:

从“vue”导入Vue

从“vue路由器”导入路由器

从“@/components/index”导入索引

Vue.use(路由器)

导出默认新路由器({

路线:[

{

路径:“/”，

组件:索引

}

]

})ps:我们来看看vue-router路由的懒加载。

用vue.js写单页面应用时，打包的JavaScript包会很大，影响页面加载。我们可以利用路由的惰性加载来优化这个问题。当我们使用一个路由时，我们会加载相应的组件，这样效率会更高。实现代码如下:

从“vue”导入Vue

从“vue路由器”导入路由器

Vue.use(路由器)

导出默认新路由器({

路线:[

{

路径:“/”，

component:resolve = & gt；要求(['components/Hello.vue']，解析)

{

路径:“/about”，

component:resolve = & gt；要求(['components/About.vue']，解析)

}

]

})相信看完这个案例，你已经掌握了方法。更多精彩请关注Gxl上其他相关文章！