Question

我需要为将要使用它们的几个小项目建立一个可重用组件| pipes | etc的库。

这些项目将包含一些延迟加载的部分。一个典型的应用程序由几个选项卡组成，这些选项卡的内容是延迟加载的。

要了解摇树的工作原理，我创建了3个组件：

compo1.component.ts

@Component({
  selector: 'app-compo1',
  template: 'compo1-content',
  styleUrls: ['./compo1.component.scss']
})
export class Compo1Component {
}

（compo2.component.ts和compo3.component.ts的相同模板）

这些组件已按照角度指南的建议嵌入SharedModule中。

现在，在Lazy1Module中，Lazy1Component仅嵌入Compo1Component：

lazy1.component.ts

@Component({
  selector: 'app-lazy1',
  template: '<app-compo1></app-compo1>',
  styleUrls: ['./lazy1.component.scss']
})
export class Compo2Component {
}

（对于Lazy2Module和lazy2.component.ts使用相同的模式）。我故意不要使用compo3.component.ts。

然后，我使用ng build --prod --aot构建项目。

结构如下：

├── 1.0282cf6b35ff530d4bfa.js
├── 2.701cf269742044ec4b71.js
├── 3rdpartylicenses.txt
├── common.7aac461df5427f420d7f.js
├── index.html
├── main.ef0af895ad2a9362da5f.js
├── polyfills.3f4b55f3bddd0d338786.js
├── runtime.9a8874d6abac70e934ae.js
└── styles.3b0c35b989b1a3ac962a.css

我想1.0282cf6b35ff530d4bfa.js是第一个惰性模块，2.701cf269742044ec4b71.js是第二个惰性模块。

我发现compo1和compo2的定义嵌入了common.7aac461df5427f420d7f.js

compo3的定义未包含在构建中。

因此，这是我的理解：

从不使用的组件将从构建中排除。
如果仅在一个惰性模块中使用组件，则该组件将嵌入common.xxx.js中，因此即使仅在惰性加载的选项卡中使用该组件也将在启动时进行加载。

当我查看angular-material的制作方式时，似乎每个小部件有1个模块。这样做是否有意义（除了组织目的之外）？在我看来，每个小部件1个模块或一个模块中的每个小部件在库加载方面（至少在生产模式下）将产生相同的输出。

我应该为每个小部件制作1个模块，还是应该只关心在具有相同目的的模块中重新组合小部件？

了解树抖动和模块故障

0 个答案: