Question

此问题与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捆绑在一起并创建自己的库，那么它仍然应该算不上太大（我在约14个主题中拥有11 Kb的存储空间）。当您将styles.scss包含在所有主题中时，它可以按预期工作，并且一切都会很好。

当您要自定义某些组件时出现问题。如相关答案所述，将styles.scss包括在内确实是个坏主意，这是真的-每个主题组件约有2.68 Mb。但是包括_variales.scss也会提供太多-每个主题组件260 Kb仍然很重要。我研究了生成的代码，发现每个主题组件都包含'~@angular/material/theming。好吧，这对于隔离组件样式的Angular方法应该是正确的，而且我不能只删除该文件，因为存在相关的mixins，但是也许还有另一种方法可以使此文件成为全局文件，并且不将其包含在每个文件中我要自定义的组件？

Answer 1

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

通过具有样式管理器服务，并在每次用户更改主题时删除并包括样式并获取不同的CSS文件（Http请求）。这是您可以寻找的一些关键文件，以了解它们的工作方式。

提供帮助的服务。

INT_MAX

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

他们如何编译自定义主题

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

自定义主题的位置

<repo_root>/tools/build-themes.sh

角材料自定义组件主题-优化包大小

1 个答案: