代码分割与按需加载协同压降首屏体积：用动态import()划分加载边界；路由级懒加载（如React lazy+Suspense）；第三方库轻量化或延迟加载；配合webpackPreload/Prefetch注释优化预加载策略。
核心思路很直接：不让用户第一次打开页面时，就下载整个应用的全部代码。首屏只加载当前必需的部分，其余功能延后加载——代码分割是拆分动作，按需加载是触发时机，两者配合才能真正压降首屏体积。
用动态 import() 划出加载边界
这是最常用也最可控的方式。把原本静态 import 的模块，改成函数调用形式，让打包工具识别为独立 chunk：
- 替换写法：
import { initChart } from './charts.js'→const { initChart } = await import('./charts.js') - 它返回 Promise，天然支持异步逻辑，比如点击按钮后再加载图表库
- Webpack、Vite、Rollup 都原生支持，无需额外配置即可生成单独文件
路由级懒加载，精准匹配用户路径
单页应用中，不同路由对应的功能差异大，但用户大概率只访问其中一两个。React 中常用 lazy + Suspense：
const Dashboard = lazy(() => import('./pages/Dashboard'))<Suspense fallback="<Loading />"><Dashboard /></Suspense>- 访问
/dashboard时才拉取对应 JS，首页完全不包含它的代码
第三方库做轻量化或延迟加载
像 moment、lodash、monaco-editor 这类“重型依赖”，往往只用到一两个方法，却带入几百 KB：
立即学习“Java免费学习笔记（深入）”；
- 换更小的替代品：用
date-fns替代moment，体积减少 90%+ - 改用 ES 模块版本 + 按需导入：
import format from 'date-fns/format'，避免全量引入 - 重型组件封装成异步调用：
if (showEditor) await import('monaco-editor')，连初始化都省掉
用魔法注释引导预加载策略
动态 import 后加 webpack 特殊注释，能告诉打包器“什么时候加载更合适”：
-
import(/* webpackPreload: true */ './ReportModule.js')：页面空闲时提前拉取（适合下一步高概率触发的模块） -
import(/* webpackPrefetch: true */ './Settings.js')：当前导航完成后再后台静默加载（适合低频但需快速响应的模块） - 注意：Preload 是关键资源优先加载，Prefetch 是预测性加载，别混淆用途
