Angular Material 自定义组件主题 - 包大小优化

Question

此问题与有关。主要目标是找到优化主题组件包大小的最佳方法。

嗯，我们有这样一个主题：

amber
  ├ _variables.scss
  ├ theme.scss

_variables.scss:

$amber-primary: mat-palette($orange);
$amber-accent:  mat-palette($orange, A700, A100, A400);
$amber-warn:    mat-palette($mat-red, A200);
$amber-theme:   mat-light-theme($amber-primary, $amber-accent, $amber-warn);

theme.scss:

.amber-theme {
    @include angular-material-theme($amber-theme);
}

并且在父文件夹中有一些 _variables 文件将所有颜色和主题收集在一起：

@import '~@angular/material/theming';
@import 'colors';

@import 'amber/variables';
...

看起来很酷，对吧？但！如果您将它与 scss-bundler 捆绑在一起并创建您自己的库，它仍然应该一点也不大（我有 11 Kb 约 14 个主题）。当您将 styles.scss 包含在所有主题中时 - 它会按预期工作并且一切正常。

自定义某个组件时出现的问题。正如相关答案所说，包括 styles.scss 真的是个坏主意，这是真的 - 每个主题组件大约有 2,68 Mb。但包括 _variales.scss 也提供了太多 - 每个主题组件 260 Kb 仍然是一个大问题。我研究了生成的代码，发现每个主题组件都包含 '~@angular/material/theming。好吧，这应该适合 Angular 隔离组件样式的方式，我不能只删除这个文件，因为有相关的 mixins，但也许还有其他方法可以使这个文件成为全局文件并且不包含它进入我想要自定义的每个组件？

Answer 1

如果您真的想包含 14 个主题（我不知道您为什么要这样做）并减小初始 css 文件大小，您可以执行 Angular Material documentation site do (Repo link 的操作。

通过使用样式管理器服务并删除和包含样式，并在每次用户更改主题时获取不同的 css 文件 (Http req)。以下是您可以查看的几个关键文件，以了解他们是如何做到的。

提供帮助的服务。

<repo_root>/src/app/shared/theme-picker/

<repo_root>/src/app/shared/style-manager/

他们如何编译自定义主题

<repo_root>/tools/build-themes.sh

自定义主题所在的位置

material.angular.io/src/assets/

Angular Material 自定义组件主题 - 包大小优化

Angular Material Custom Component Theming - bundle size optimisation

angular-material2

angular