Отказ от ответственности: Есть несколько вопросов по SO относительно CSS и обсуждения одного или нескольких файлов CSS, но я думаю, что это немного отличается
У меня довольно большое приложение Angular 7 с использованием Angular Material 2, и я хочу представить темы. Каждая тема будет извлечена при входе пользователя в систему (тема сохраняется на сервере и не может быть изменена пользователем).
Вопрос в основном касается того, будет ли лучше экспортировать один файл CSS с использованием классов верхнего уровня (тела или контейнера приложения) для каждой темы, заменяя только классы, которые изменяются для каждой темы или лениво загрузить новый файл CSS поверх основного файла CSS только с перезаписываемыми классами.
Моя самая большая проблема с первым вариантом - получить огромный одиночный файл CSS. Текущий файл уже имеет размер около 300 КБ (в неинициализированном CSS - около 11 000 строк кода), а темы имеют размер от 200 до 500 строк каждая и может содержать более 10 тем, файл может легко получить удвоенную или даже тройную сумму.
С другой стороны, лениво загруженный CSS может заставить пользователя загрузить 2 меньших файла, но последствия могут быть хуже. Например, загруженный «ленивый» файл CSS необходимо экспортировать с отдельными конфигами в Angular CLI, а имя должно быть конкретным, чтобы его можно было загружать из Angular при входе в систему, что означает, что кэширование может стать проблемой, если что-то изменится, а также отсутствие контроля версий (например, theme-blah-2.17.css) также невозможно в названии файла. Возможно, другие последствия, о которых я не могу думать и сейчас.