Tree Shaking与Lazy Loading的区别及Angular相关技术疑问

1. 本质与作用时机 #

• Tree Shakeable（可摇树优化）：这是构建阶段的代码优化手段。当你给服务加上providedIn: 'root'时，Angular会把该服务标记为"可被摇树"——如果你的应用代码里没有任何地方引用、注入这个服务，打包工具（比如Webpack）会在构建时直接把它从最终的产物包中剔除，避免冗余代码。如果确实被使用了，它会被打包进主 bundle 里，随应用初始加载一同加载。
• Lazy Loaded（懒加载）：这是运行阶段的资源加载策略。通过loadChildren()配置路由懒加载，Angular会把目标模块打包成独立的代码块（chunk），这个块不会在应用初始加载时被下载，只有当用户导航到对应的路由时，浏览器才会异步请求并加载这个模块的代码。

2. 是否仅发生在初始构建时？ #

• Tree Shakeable 完全是构建时行为：整个优化过程在编译打包阶段完成，运行时不会有任何相关操作。
• Lazy Loaded 既有构建时步骤，也有运行时行为：构建时会拆分出独立的代码块，但真正的加载动作是在用户触发特定操作（比如路由跳转）时才会发生，属于运行时的动态加载。

3. 为什么providedIn: 'root'的服务不叫"懒加载服务"？ #

懒加载的核心是延迟加载到运行时——资源在需要的时候才被请求和加载。而providedIn: 'root'的服务要么在构建时被剔除（从未加载），要么被打包进主 bundle 随应用初始加载（启动时就已加载），不存在"按需延迟加载"的过程。它的优化点是避免无用代码进入产物，而非延迟加载时机，因此不能被称为懒加载服务。

内容的提问来源于stack exchange，提问作者Kyle Vassella