一、认识路由的懒加载
1.为什么要使用路由懒加载?
当项目打包时,js的包会变得很大,影响页面的正常加载。如果可以把不同路由对应的不同组件分割成不同的代码块,然后当路由被访问时才加载对应的组件,这样更高效。
2.路由懒加载的作用
- 将路由对应的组件打包成一个个的js代码块
- 只有在这个路由被访问时,才加载对应组件
二、路由懒加载的使用
在src/index.js中使用路由懒加载来替换单纯的导入组件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dfb37f1827fe3b5d2cf1bc06ac35cc89.png)
运行结果一致:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5f5fe58f37189e91518f31c12d1a8e06.png)
- 没有使用路由懒加载,点击路由导航2,可以看到没有发送请求
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1cec2ab01c0d60321b001e7ccd54f33d.png)
- 使用路由懒加载,点击路由导航2,可以看到发送了一个js请求,这个就是请求的组件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7640241772beafa03c750d9b60f7a2ec.png)
这就是路由的懒加载,喜欢的朋友可以点赞加收藏哦!