路由懒加载的原理及实现_前端路由懒加载

大家好，又见面了，我是你们的朋友全栈君。

懒加载解决的问题： 避免进入首页就加载全部的前端资源造成用户等待时间过长的问题。 就好比，访问 login 页面，你返回的 js 路由不仅有渲染 login 页面的，还有渲染 production 页面以及其他页面的功能。而这些代码量太大了，文件也大。js 文件有个特征，下载完全了才会运行，导致页面首屏速度太慢了，也就是白屏时间太长。这个问题，早就有人发现，于是解决方案就是路由懒加载，这只是一个技术名词。

Vue路由懒加载原理说明 1） 我们一开始用ES6的写法，在路由文件router/index.js中引入所有路由要用到的组件，然后在每个路由对象中注册组件。使用这种方法时，我们加载路由文件时，首先要加载所有引入的路由组件，这样会影响页面的加载速度。现在我们通过懒加载的方式去改善这一问题，所以就延伸出了resolve这一概念； 2） 箭头指向的部分就是我们的改善方法。当用require这种方式引入的时候（ES5的写法），会将component分别打包成不同的js文件，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js； 3） 也是按需加载，只用访问这个路由网址时才会加载这个js；

使用：

写法1：
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
写法2：
component:resolve => require(['@/pages/task'],resolve)

webpackChunkName：在学习了webpack之后了解其做用，作用就是webpack在打包的时候，对异步引入的库代码（lodash）进行代码分割时（需要配置webpack的SplitChunkPlugin插件），为分割后的代码块取得名字。 Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/188876.html原文链接：https://javaforall.cn