核心是首屏仅加载几十KB，其余按需加载：通过动态import()拆分非首屏逻辑、路由驱动分包、提取公共依赖（如lodash/axios）、配合preload/prefetch控制加载时机。
核心是让首屏只加载几十KB，其余模块按需加载。5MB的JS巨石不能一口气全塞给用户，得拆成“用到才拉”的小块——靠动态导入、路由驱动分包、公共依赖提取和加载时机控制四步落地。
用动态import()把非首屏逻辑摘出来
静态import会在构建时打进主包，哪怕那个模块只在弹窗里用一次。换成import()，打包工具就能自动把它拎出来单独成chunk：
- 把报表导出、PDF生成、图表渲染等功能封装成独立文件，比如
pdfExporter.js、chartRenderer.js - 在用户点击按钮或打开面板时再加载：
button.addEventListener('click', () => import('./pdfExporter').then(m => m.export())) - 避免在循环或高频事件（如scroll、input）里反复调用
import()，否则可能瞬间触发几十个请求
按路由拆分，访问哪页才加载哪页的代码
单页应用天然适合这条路：进首页不加载后台管理代码，点进个人中心才拉它的JS。框架配合构建工具能自动完成：
- Vue Router：
{ path: '/admin', component: () => import('@/views/Admin.vue') } - React Router v6.4+：
element配合Suspense，loader返回import('./Admin').then(m => ({ Component: m.default })) - 每个路由组件会生成独立chunk（如
admin.a1b2c3.js），首次访问/时完全不下载它
提取公共依赖，避免重复打包
5MB里常有1MB+是lodash、axios、chart.js这类被多个页面共用的库。不提取就会在每个路由chunk里重复出现：
- Webpack中配置
optimization.splitChunks，设chunks: 'all'，并指定minSize和maxInitialRequests - Vite默认启用
build.rollupOptions.output.manualChunks，可按包名归类：vendor: ['lodash', 'axios'] - 给公共chunk加内容哈希名（如
vendor.e8f9d2.js），浏览器长期缓存，更新一个页面不影响其他chunk缓存命中
用preload/prefetch控制加载时机
拆完之后，别让用户感受到“点了才开始下载”的卡顿：
- 对关键路由（如登录后必进的首页），用
提前拉取 - 对次要路由（如“帮助中心”），用
rel="prefetch"在空闲时静默加载 - 注意prefetch只在浏览器空闲时触发，不会抢占主资源带宽
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
