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

【问题标题】：Angular Material Custom Component Theming - bundle size optimisationAngular Material 自定义组件主题 - 包大小优化
【发布时间】：2019-05-23 10:00:32
【问题描述】：

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

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

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 隔离组件样式的方式，我不能只删除这个文件，因为有相关的 mixin，但也许有另一种方法可以使这个文件全局化并且不将它包含在每个文件中我要自定义的组件？

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

如果您真的想包含 14 个主题（我不知道您为什么要这样做）并减小初始 css 文件大小，您可以执行 Angular Material documentation site 所做的事情（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/

【讨论】：