vue-router路由懒加载的实现(首次解决vue项目加载慢的问题)

在Web应用中，系统的瓶颈往往在于系统的响应速度。如果系统的响应速度太慢，用户会抱怨，系统的价值会大大降低。因此，提高系统的响应速度非常重要。

按需加载(Load On Demand)是一种独特而强大的数据获取方式，可以在用户滚动页面时自动获取更多的数据，而新获取的数据不会影响原始数据的显示，同时最大限度地减少服务器端的资源消耗。

也叫延迟加载，即需要时加载，需要时加载。

为什么需要懒洋洋地加载？

对于vue这样的单页应用，如果没有偷懒加载，用webpack打包的文件会异常大，导致进入主页时加载的内容过多，导致出现长白屏。即使加载完成，也不利于用户体验。但是懒加载可以在需要的时候进行分页加载，可以有效分担主页所承受的加载压力，减少主页的加载时间

简单来说就是一次加载太多资源进入首页时间太长！

如何实现？

延迟加载写入：

非延迟加载的路由配置：

还有一点：如果遇到，看看——，就是懒加载后，直接运行包，index.html会报错。文件引用错误实际上是打包时路径配置的问题。修改一下就行了。

下图：

转到生成下的webpack.prod.conf.js并添加公共路径：“”。/'.

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。