路由懒加载

路由懒加载

前言

在 spa（单页面应用）项目中，一个路由通常对应着一个页面。如果不做特殊处理，在把项目打包后，所有的页面将打包成一个文件。这种处理方式会导致首页需要一次性加载所有资源，从而影响了用户体验。

为了解决这个问题，可以使用路由懒加载。本文将介绍什么是路由懒加载，它的原理，优点和缺点，以及应用场景和示例代码等相关知识。

路由懒加载的原理

路由懒加载的本质：是将代码划分为一块块小的模块，只有在用户访问到某个页面时才会请求加载对应的模块

要实现懒加载，首先需要将进行懒加载的子模块分离出来，然后打包成一个单独的文件。es6 的动态加载模块 import() 可以用来实现这一功能。调用 import() 的地方被视为分割点。这意味着被请求的模块以及它所引用的所有子模块会被分割到单独的块中。这样，就可以按需引入对应的模块了

路由懒加载的优点

使用路由懒加载主要有以下两个优点：

• 减少初始化加载时间：只在需要的时候才加载，spa 原本是全加载的，现在可以按需加载
• 提高性能：因为只加载最小化/及时的代码，所以路由懒加载可以提高整体性能

路由懒加载的缺点

然而使用路由懒加载也有一些不足之处：

• 多请求带来的网络性能问题：SPA加载页面时就发送一次请求，而路由懒加载把整个文件分割了，得发送多个请求，可能会增加网络延迟和带宽要求
• 不支持浏览器原生的预加载指令：本质不同，一个按需加载，一个预先加载

应用场景

• 大型应用程序：大量页面，一次性加载的话花费时间长
• 移动应用程序：移动设备上，带宽和资源限制更为严格

使用案例

使用箭头函数和import()异步引入组件来实现懒加载

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
//方式一：
const Home = () => import('./views/Home.vue')
//方式二:
//const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue')

const About = () => import('./views/About.vue')

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

注意：

• 想要支持旧版浏览器，需要安装@babel/plugin-syntax-dynamic-import插件来转换动态导入语法
• 使用 webpackChunkName 可以给打包的后各个chunk命名，方便管理

结语

感谢读者阅读并关注博客文章，并对文章中提到的观点、建议或批评表示感谢