NX 一个 Ui-lib 或为每个 Ui 用例创建一个库

Question

所以我想在我的角度项目中创建共享库。我在下面列出了我的两种方法，它们都发挥了作用，但我不知道哪一种是我应该实施的更好的方法。

\n

#1 一个包含 X 组件的 Ui 库

\n

libs\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 [...]\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 shared\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ui (lib)\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ui-card (component)\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ui-*\n

\n

#2 每个 Ui 都有一个库

\n

libs\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 [...]\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 shared\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ui-card (lib)\n    \xe2\x94\x82    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 card (component)\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ui-* (lib)\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 *\n

\n

本文指出我应该遵循第二种方法，但没有解释为什么应该为每个 ui 创建一个库： https ://medium.com/showpad-engineering/how-to-organize-and-name-应用程序和库在 nx-monorepo-for-immediate-team-wide-9876510dbe28

\n

如果我的问题的解决方案也可以用于data-access和util库，那么也很高兴知道

\n

Answer 1

如果一个模块中有多个组件，那么您的最终捆绑包将包含所有这些组件，即使您只使用其中的一小部分。

如果您为每个组件（或始终一起使用的组件）创建一个模块，则捆绑包大小会更有效，但最终会产生更多样板代码。

第二种方法也是 Angular Material 所遵循的方法。

当我们处理属于应用程序一部分的 UI 库时，我认为没有必要为每个组件配备一个模块。

如果您将 UI 库发布为像 Material 一样的“真正的 npm 库”，那就是另一回事了。

data-access我绝对不会遵循,util和libs的第二种策略feature。这些通常是为应用程序的特定需求而设计的，即您将需要所有这些，在这种情况下，更少的样板更重要。