核心思路是首屏只加载必需代码，其余按需或延后加载；路由级懒加载、功能模块按需触发、第三方库瘦身、预加载与预获取协同优化。
核心思路是让首屏只加载真正需要的代码，其余模块延后或按需加载。重点不在“全量打包”，而在“精准供给”。
路由级懒加载
把不同页面拆成独立代码块，用户访问哪个路由才加载对应逻辑。这对 SPA 尤其有效。
- React 中配合 React.lazy + Suspense：
const Dashboard = React.lazy(() => import('./Dashboard')); - Vue 中使用异步组件写法：
component: () => import('./Dashboard.vue') - 确保配合骨架屏或 loading 提示，避免白屏等待无反馈
功能模块按需触发
用户没点的功能，就别让它进主包。比如“导出 Excel”、“编辑富文本”这类非首屏操作。
- 监听点击/弹窗打开等事件，再动态 import() 对应模块
- 示例：
button.addEventListener('click', async () => { const { exportExcel } = await import('./export.js'); exportExcel(data); }); - 避免在模块顶层 import 大型依赖（如 moment、monaco-editor），改用更轻量替代或条件加载
第三方库瘦身策略
很多体积问题来自“用了 5% 的功能，却打包了 100% 的代码”。
立即学习“Java免费学习笔记（深入）”；
- 用 date-fns 替代 moment，支持按函数导入：
import format from 'date-fns/format'; - lodash 推荐用 lodash-es + 按需导入，或直接用更小的工具库如 radash
- 对稳定全局库（如 React、Vue、jQuery）配置 webpack externals，或通过 CDN 加载，不打入 bundle
预加载与预获取补充体验
动态导入之后，可以进一步优化感知速度。
- 对大概率即将访问的模块（如“下一步”按钮后的页面），用 webpackPrefetch 让浏览器空闲时悄悄下载
- 对当前操作强相关的资源（如点击“编辑”后必用的 monaco-editor），用 webpackPreload 提前加载，避免卡顿
- 注意不要滥用 prefetch，过多会抢占带宽，反而拖慢首屏
