懒加载解决的问题:
避免进入首页就加载全部的前端资源造成用户等待时间过长的问题。
就好比,访问 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 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

Logo

前往低代码交流专区

更多推荐