打开一个电商首页，点进商品详情页，再跳到购物车——这些跳转背后，不是所有 JS、CSS 都一股脑儿全加载了。真正聪明的路由设置，会让浏览器只拿它当下需要的那部分资源，别的先放着，等用到再说。
为什么非得“按需”？
想象你进一家超市，不买菜却先把冷冻柜、干货区、收银台的灯全打开，电费哗哗涨，还容易晃眼。网站也一样：首页加载了后台管理用的图表库、用户中心的头像裁剪组件、甚至 404 页面的动画效果，结果用户只看了三秒就关掉——白下、白解析、白占内存。
路由级按需怎么干？
主流前端框架基本都支持基于路由的代码分割。比如 Vue Router 配合 defineAsyncComponent 或直接写异步导入：
const routes = [
{
path: '/user',
component: () => import('./views/UserProfile.vue')
},
{
path: '/admin',
component: () => import('./views/AdminDashboard.vue')
}
]React Router v6 也是类似路子，用 lazy + Suspense：
const AdminPage = lazy(() => import('./pages/AdminPage'));
<Routes>
<Route path="/user" element={<UserProfile />} />
<Route path="/admin" element={<Suspense fallback={<Loading />} ><AdminPage /></Suspense>} />
</Routes>别光顾着组件，样式和数据也得“懒”
组件懒了，但它的 CSS 如果还打包在主样式表里，意义不大。配合 Webpack 或 Vite 的 import('./style.css')，或者在组件内部用 <style scoped>（Vue）或 CSS Modules（React），才能真把样式也拆开。
数据接口同样可以配合路由节奏发请求。比如进入订单页时才调 /api/orders?limit=10，而不是在 layout 层就预拉用户所有历史订单——尤其当用户只是路过看看，并不点进去。
小技巧：预加载别太莽
有些场景适合“悄悄提前拿”，比如鼠标悬停在「我的订单」菜单项上时，就预加载对应 chunk；但别一进首页就把所有二级路由全 prefetch。Vite 的 import.meta.webpackPrefetch（Webpack）或 import('xxx').then(...) 加个 setTimeout 控制时机，比盲目预加载更靠谱。
资源按需加载不是玄学，是路由配置里一个开关、一行 import()、一次对用户真实路径的判断。做对了，首屏快半秒，热更新快两秒，CDN 流量少一成——这些数字，老板和用户都看得见。