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

全栈程序员-站长 • 2022年9月27日上午11:36 • 未分类 • 阅读 0

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

懒加载解决的问题：
避免进入首页就加载全部的前端资源造成用户等待时间过长的问题。
就好比，访问 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.net/188876.html原文链接：https://javaforall.net