按需编译与代码分割需结合构建工具和模块设计。通过动态import实现路由级分割，Webpack的SplitChunksPlugin提取公共模块，Tree Shaking清除未用代码，并利用预加载优化体验，配合bundle分析持续优化策略。
前端项目要实现真正的按需编译与代码分割，核心在于结合构建工具的能力和合理的代码组织方式。关键不是简单地使用懒加载语法，而是从模块设计、打包策略到运行时协作的整体优化。
动态导入实现路由级代码分割
现代框架如 React 或 Vue 都支持基于动态 import() 的懒加载。通过将页面组件异步引入，让路由切换时才加载对应代码块。
例如在 React 中：- 用 React.lazy 包裹动态 import，配合 Suspense 处理加载状态
- 每个路由指向一个独立 chunk，避免首页加载全部逻辑
- Webpack 会自动为这些 import() 创建新的 bundle 文件
利用 Webpack 的 SplitChunksPlugin 进行公共模块提取
默认情况下，Webpack 可能会重复打包多个入口共用的依赖。配置 splitChunks 能把第三方库（如 lodash、moment）或自定义公共模块单独抽离。
关键配置建议：- 设置 chunks: 'all'，覆盖同步和异步模块
- 调整 minSize 和 maxSize 控制拆分粒度
- 通过 cacheGroups 将 node_modules 分类提取，比如 vendor-react、vendor-utils
Tree Shaking 清除未使用代码
确保打包器能静态分析出无用导出，前提是代码必须是 ES Module 格式，且没有副作用。
立即学习“前端免费学习笔记（深入）”；
实际操作注意点：- 使用 import/export 语法，避免 require
- 在 package.json 中标记 "sideEffects": false 或提供数组声明有副作用文件
- 开发库时暴露 es 模块版本（通过 module 字段）
预加载与预连接提升体验
代码分割后请求变多，合理使用资源提示可缓解延迟。
- webpackPreload: true 在父 chunk 加载后立即拉取子 chunk
- webpackPrefetch 在空闲时预加载可能需要的模块
- 配合 rel="preload" 或 rel="prefetch" 的 link 标签做关键资源提示
