数据大屏：路由懒加载
1. 路由懒加载减小初始打包体积
你在开发单页应用（SPA，比如 Vue 项目、React 项目）时，默认情况下会把所有页面的代码打包成一个 js 文件（比如app.js）。这会带来两个严重问题：
- 首屏加载慢：如果项目有 100 个页面，首屏加载时要下载这一个超大的 js 文件，网络差的情况下页面会白屏很久，用户体验极差；
- 资源浪费：用户可能只访问首页和列表页，却下载了详情页、个人中心等所有页面的代码，完全没必要。
而路由懒加载就是为了解决这两个问题而生的 —— 它的核心思想是：把不同路由对应的组件分割成不同的代码块，只有当用户访问该路由时，才加载对应的代码块。简单说就是 “按需加载”，用的时候再加载，不用不加载。
项目通过路由懒加载机制优化首屏加载速度，在src/router/index.js中可以看到：
1 | component: () => import(/* webpackChunkName: "LSD.bighome" */ '../views/indexs/index.vue') |
- 采用
import()动态导入语法，将路由组件分割为独立的代码块 - 通过
webpackChunkName注释实现代码块命名，便于生产环境的资源管理 - 仅在访问对应路由时才加载相关组件，减少初始加载的资源体积
