前端八股文 路由的懒加载

为什么会有 路由的懒加载

在现代单页应用（SPA）的开发中，路由懒加载是一种提升应用性能的关键技术。通过按需加载组件，而非在应用启动时一次性加载所有模块，可以显著减少初次加载时间和资源消耗。本文旨在深入探讨前端路由懒加载的概念、作用、实现方式，并结合实际开发经验分享一些使用技巧，帮助开发者构建更加高效、响应迅速的应用。（因为vue是单页面spa模式 如果没有路由懒加载 会在首页 加载很多的资源 会造成首页白屏 然后为了解决这个问题 有了路由的懒加载 ---通过按需加载组件，而非在应用启动时一次性加载所有模块）

什么叫做路由的懒加载

大白话 （也叫延迟加载，即在需要的时候进行加载，随用随载。 使用懒加载的原因： vue 是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验）

官方解释 为什么会有路由的懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

路由懒加载做了什么事情？

1：主要作用是将路由对应的组件打包成一个个的js代码块
2：只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！

即：只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！

基本概念与作用

路由懒加载指的是在用户导航至某个特定路由时，动态加载与该路由相关的组件和业务逻辑。这与传统的打包策略形成对比，后者倾向于将所有组件捆绑在一起，导致较大的初始加载时间。

作用

• 提升性能：减少首次加载时间，改善用户体验。
• 资源管理：按需加载资源，降低内存占用，提高系统响应速度。
• 可维护性：模块化开发，使得代码更易于管理和更新。

• 如何实现

  vue项目实现路由按需加载（路由懒加载）的三种方式：

  1：Vue异步组件

  2：ES6标准语法import（）---------推荐使用！！！！！

  1：直接将组件引入的方式，import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。

  2：推荐使用这种方式，但是注意wepack的版本>2.4

  3：vue官方文档中使用的也是import实现路由懒加载

  4：上面声明导入，下面直接使用

  3：webpack的require，ensure()

• 注意！！

• 如果没有用到路由的懒加载 webpack 打包的时候是 一个js文件 用的话就是多个js文件