资源按需加载策略：让路由跳转更轻、更快

打开一个管理后台，点「订单」，等两秒；再点「用户」，又卡一下——不是网慢，是首页把所有页面的 JS 都打包进来了。这种‘一锅端’的做法，在页面多、功能杂的项目里，越来越扛不住。

什么是资源按需加载策略？

简单说，就是‘用到哪，才加载哪’。比如用户只访问 /dashboard，那就只拉 dashboard 对应的组件和样式；点进 /reports，再动态请求 reports 模块。不浪费带宽，不拖慢首屏，内存占用也更可控。

路由层怎么落地？

现代前端框架基本都支持基于路由的代码分割。以 Vue Router 为例，不用 import() 写死路径，而是用函数式动态导入：

const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue')
  },
  {
    path: '/reports',
    component: () => import('@/views/Reports.vue')
  }
]

Webpack 或 Vite 在构建时会自动把这些 import() 转成独立 chunk，浏览器在真正导航到对应路径时才发起请求。

别只顾组件，连样式和 API 也得‘懒’起来

有些页面依赖特定图表库（比如 ECharts），但首页根本用不上。可以把它和组件一起封装进路由模块里：

component: () => Promise.all([
  import('@/views/Analytics.vue'),
  import('echarts')
]).then(([module, echarts]) => {
  module.default.components.ECharts = echarts;
  return module.default;
})

API 请求也可以配合路由做粒度控制——比如 /users/:id 页面，只在该路由激活后才调用 getUserDetail(id)，而不是在 Layout 里提前拉一堆无关数据。

小心这些坑

按需加载不是加个 import() 就万事大吉。常见问题有：
• 没配 loading 状态，白屏几秒用户以为卡死了；
• 公共依赖没抽离，每个 chunk 都重复打包 moment、lodash；
• SSR 场景下没做服务端同步加载，导致首屏内容缺失。

实际项目中，我们给所有异步路由加了骨架屏，同时用 Webpack 的 splitChunks 把第三方库统一打到 vendor chunk，上线后首屏 JS 体积从 2.1MB 降到 860KB，路由切换平均快了 400ms。