代码分块加载不直接释放内存，但能显著降低初始内存压力；它通过按需加载减少首屏堆内存分配，配合动态导入、构建工具拆分、副作用清理及内存监控实现优化。
代码分块加载本身不直接“释放”已占用的内存，但它能显著降低初始内存压力——通过避免一次性加载全部逻辑，让浏览器只分配当前需要的那部分内存。
按需加载，减少初始堆内存分配
大型应用若把所有模块打包进一个 bundle，页面一打开就要解析、编译、执行全部 JS，大量函数、对象、闭包会立刻进入堆内存。而代码分块后，只有首屏相关代码被加载，其余模块（如后台管理页、报表组件）在用户真正访问前完全不参与内存分配。
- 使用 dynamic import() 触发懒加载，模块代码和其依赖仅在调用时才进入内存
- Webpack 或 Vite 默认对
import()生成独立 chunk，配合浏览器的 module cache，同一模块多次加载不会重复分配内存 - 注意：已加载的 chunk 不会自动卸载，除非手动删除 script 标签或清空 module cache（极少需要）
配合弱引用与及时清理，防止残留引用
分块加载只是起点；如果加载后的模块内部持有全局引用（比如往 window 挂对象、未移除的事件监听器、长期运行的定时器），即使模块逻辑用完，内存也无法回收。
- 动态导入的模块应设计为“自包含”：内部不污染全局，卸载时主动清理副作用（如
removeEventListener、clearTimeout） - 对缓存数据结构，优先使用 WeakMap / WeakSet 存储 DOM 节点或临时对象，它们不阻止垃圾回收
- 避免在模块顶层声明长生命周期变量；用函数作用域包裹，让变量随执行上下文自然销毁
利用构建工具做语义级拆分
单纯靠手写 import() 不够，还需构建工具识别“可分割边界”，剔除冗余代码，缩小每个 chunk 的实际体积。
- 启用 Tree Shaking：确保未使用的导出（尤其是工具函数、旧兼容逻辑）不被打包进任何 chunk
- 配置 SplitChunksPlugin（Webpack）或 build.rollupOptions.output.manualChunks（Vite），把第三方库（如 moment、lodash）单独抽成 vendor chunk，避免重复打包
- 路由级分块最有效：React Router 的
lazy()、Vue Router 的异步组件，天然对应用户行为路径，chunk 复用率高、缓存友好
监控验证效果是否真实落地
分块不是“写了 import() 就万事大吉”。必须用工具确认内存是否真的降下来。
- 打开 Chrome DevTools → Memory 面板 → 录制“首次加载 + 点击某功能”的内存快照，对比分块前后堆大小（Heap Size）和 JS 堆中对象数量
- 关注 Detached DOM trees 和 Closure 类型对象是否异常增长——这往往说明懒加载模块没清理干净
- 用
performance.memory（若可用）或 Lighthouse 的 Memory Usage 建议项辅助判断
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
