Angular 树摇晃 : How exactly does it work?

Question

我们目前正在尝试优化复杂的 Angular 应用程序(性能和包大小)。

我们发现我们有部分未使用的组件，但我们不能 100% 确定它们。无论如何......我们目前要问的问题是，摇树在 Angular 中究竟是如何工作的。

问题一)如果模块的声明、导入或提供程序数组中有条目，但该模块没有在任何地方使用，它们是否也通过摇树摇晃被删除，或者它们是否包含在最终包中？

例子:

@NgModule({
  imports: [
    FirstModule,
    SecondModule  // Is not used anymore (probably) but imported here
  ],
  declarations: [SampleComponent] // Is not used anymore (probably) but imported here
})
export class SampleModule {
}

信息:该模块/组件的路由已被删除。

问题2)仅从路由模块中删除这些组件是否足以使摇树过程成功？

问题3)为使 treeshaking 过程以最佳方式工作，应该采取什么措施？

使用 Angular 版本 8.2

Answer 1

关于 Angular 中的 tree-shaking 如何工作
摇树主要在缩小阶段完成，并不特定于 Angular。 terser是他们在 Angular CLI 中使用的缩小器，它是支持 ES6 语法的 Uglify 的一个分支。terser读取您的代码，如果它没有在其他地方引用，并且可以确定删除某些代码不会有副作用，那么它将删除该代码。terser不能确定带有装饰器的类是否在定义时有副作用(装饰器是函数调用)。在 Angular 的生产版本中，他们有一个名为“build-optimizer”的 webpack 插件，它将转到使用装饰器的地方并添加特殊注释 /*@__PURE__*/在已编译的 javascript(来自 Typescript)旁边 terser识别并删除装饰类(如果它没有在别处引用)。
关于从 NgModule 中移除组件
构建过程从您的 main.ts 开始文件并抓取所有文件的所有导入以包含在您的构建中。如果从 main.ts 文件中，爬虫过程找到的任何文件都不会导入您的组件文件，那么它将永远不会被包含在内。这不是摇树，它根本不包含在构建过​​程中。
如果您的模块文件是导入组件文件的唯一位置，那么删除该导入将足以不将该组件包含在您的构建中。
关于你可以做的事情
您可以进行一些特定于 Angular 的更改，以确保您只构建您使用的代码。

使用 {providedIn: root} Injectable 的装饰选项并从任何 Angular 装饰的 providers: [] 中删除任何可注入(inject)服务、保护的地方.

使用 Ivy 渲染器，这意味着捆绑的框架更少(如果您不使用它)。

此外，在调用站点(不是定义)，您可以使用 /@__PURE__/ 标记任何没有副作用的函数。注释，以便即使它们在某处被调用，如果返回值可以通过其他优化删除，则函数本身也可以被删除。我没有对此进行测试，但理论上它应该可以工作。
我不知道所有不同的构建阶段如何转换您的代码，以及它们是否会在 terser 之前移动或删除注释。可以看到他们。
您可以使用这个游乐场工具对其进行测试:
https://terser-playground.surge.sh/
试试这个例子:

(function() {
  const a = 1;
  const b = 2;
  const c = /*@__PURE__*/ test();
  console.log(a + b);
}());

function test() {
  return 3
}