使用sideEffects时，Angular 10的树摇晃掉了AsyncPipe:false [英] Tree shaking for Angular 10 shook out AsyncPipe when using sideEffects: false

问题描述

在Angular 10中摇树正在摇晃"我的AsyncPipe.

Tree shaking in Angular 10 is 'shaking' out my AsyncPipe.

针对Angular 10的发行说明博客条目为ng new引入了新的--strict模式:

The release notes blog entry for Angular 10 introduces a new --strict mode for ng new:

这是一件事:

将您的应用免费配置为副作用，以实现更高级的树状摇动

Configures your app as side-effect free to enable more advanced tree-shaking

官方文件说:

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

When you create projects and workspaces using the strict mode, you'll notice an additional package.json file, located in src/app/ directory. This file informs tools and bundlers that the code under this directory is free of non-local side effects.

以下是该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
}

太好了！我想.我更喜欢摇树.

Great! I thought. I love more tree shaking.

但是它震撼了AsyncPipe，我不知道为什么.我在大型网站的任何地方都使用它-我不知道它怎么可能对其进行优化.

However it shook away AsyncPipe and I don't know why. I use it everywhere in a large website - and I don't see how it could possibly have optimized it away.

它仅在优化的--prod版本中执行此操作.当我将其更改为sideEffects: true时，它又可以正常工作.

It only did this in an optimized --prod build. When I changed it to sideEffects: true it worked again.

推荐答案

这是已知错误与Angular 10和常春藤的问题. 当您的组件之间有递归依赖关系时，就会发生这种情况. AComponent导入BComponent，但是BComponent也会导入AComponent.

This is a known bug with Angular 10 and an issue with Ivy. It happens when you have recursive dependencies between your components, e.g. AComponent imports BComponent, but BComponent also imports AComponent.

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

For importing, what matters is the generated component code - not the Typescript of your component class. That would mean having <app-b-component></app-b-component> in your AComponent's template also counts as importing BComponent, because internally it references BComponent.

因此，当前的变通办法虽然仍然与sideEffects: false保持更激进的树状摇动，但将是消除所有递归导入.

So the current work-around, while still keeping the more aggressive tree-shaking with sideEffects: false, would be to eliminate all recursive imports.

这篇关于使用sideEffects时，Angular 10的树摇晃掉了AsyncPipe:false的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！