使用 sideEffects 时，Angular 10 的摇树摇晃了 AsyncPipe：false

Question

Angular 10 中的 Tree Shaking 正在“摇晃”我的 AsyncPipe。

---

Angular 10 的 release notes blog entry 为 ng new 引入了新的 --strict 模式：

这样做的一件事是：

将您的应用配置为无副作用以启用更高级的 tree-shaking

官方文档说：

当您使用严格模式创建项目和工作区时，您将 请注意位于 src/app/ 目录中的附加 package.json 文件。 此文件通知工具和捆绑器此下的代码 目录没有非本地副作用。

这是package.json的内容：

{
  "name": "heroes",
  "private": true,
  "description_1": "This is a special package.json file that is not used by package managers.",
  "description_2": "It is used to tell the tools and bundlers whether the code under this directory is free of code with non-local side-effect. Any code that does have non-local side-effects can't be well optimized (tree-shaken) and will result in unnecessary increased payload size.",
  "description_3": "It should be safe to set this option to 'false' for new applications, but existing code bases could be broken when built with the production config if the application code does contain non-local side-effects that the application depends on.",
  "description_4": "To learn more about this file see: https://angular.io/config/app-package-json.",
  "sideEffects": false
}

太棒了！我想。我更喜欢摇树。

但是AsyncPipe 震动了，我不知道为什么。我在一个大型网站的任何地方都使用它 - 我看不出它是如何优化它的。

它只在优化的--prod 构建中这样做。当我将其更改为 sideEffects: true 时，它又可以工作了。

Answer 1

我的 Angular 10 应用程序和生产版本（使用 optimization=true，这导致了这种树抖动）出现了这种“过于激进的摇树”问题。

就我而言，那是被破坏的DatePipe ({{value | date}})。

这会导致语言环境未定义的错误，而它应该是（如果在开发模式下提供应用程序没有优化也可以）

ERROR Error: InvalidPipeArgument: 'Missing locale data for the locale "fr".' for pipe 'e'

更多细节在这里： Angular "InvalidPipeArgument: Missing locale data" when build or serve with optimization=true (--prod option)

Answer 2

这是带有 Angular 10 和 an issue with Ivy 的 known bug。 当您的组件之间存在递归依赖关系时，就会发生这种情况，例如AComponent 导入 BComponent，但 BComponent 也导入 AComponent。

对于导入，重要的是生成的组件代码 - 而不是组件类的 Typescript。 这意味着在 AComponent 的模板中包含 <app-b-component></app-b-component> 也算作导入 BComponent，因为在内部它引用了 BComponent。

因此，当前的解决方法是消除所有递归导入，同时仍保持使用 sideEffects: false 进行更积极的 tree-shaking。