Тематические компоненты для угловых материалов - оптимизация размеров пучков - PullRequest
Новая
       8

Тематические компоненты для угловых материалов - оптимизация размеров пучков

0 голосов
/ 24 декабря 2018

Этот вопрос относится к этому ответу .Основная цель - найти лучший способ оптимизировать размер пакета тематических компонентов.

Ну, у нас есть такая тема: 

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 Кбайт для ~ 14 тем).Когда вы включаете styles.scss во все темы - он работает как положено, и все должно быть в порядке.

Проблемы появляются, когда вы хотите настроить какой-либо компонент.Включение styles.scss - действительно плохая идея, как говорится в соответствующем ответе, и это правда - получено ~ 2,68 Мбайт на тематический компонент.Но включение _variales.scss, обеспечивающее слишком много хорошего - 260 Кбайт на тематический компонент, все еще имеет большое значение.Я исследовал сгенерированный код и обнаружил, что '~@angular/material/theming включено для каждого тематического компонента.Что ж, это должно быть правильным для Angular способа выделения стилей для компонентов, и я не могу просто удалить этот файл, потому что есть связанные миксины, но, возможно, есть какой-то другой способ сделать этот файл глобальным и не включать его в каждыйкомпонент, который я хочу настроить?

1 Ответ

0 голосов
/ 27 декабря 2018

Если вы действительно хотите включить 14 тем (которые я понятия не имею, почему вы хотите это сделать) и уменьшить исходный размер файла CSS, вы можете сделать то, что делает сайт документации Angular Material (Репо *)1003 * ссылка ).

Имея службу диспетчера стилей, удаляя, включая стиль, и извлекая другой файл 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/

...