使用 Angular CLI 缩小 CSS 类名

Posted 2023-03-06

【中文标题】使用 Angular CLI 缩小 CSS 类名

【英文标题】：Minify CSS class names with Angular CLI

【发布时间】：2021-06-18 04:32:28

【问题描述】：

我正在寻找一种通过缩小应用的 CSS 类名称来提高性能的方法。这种方法被大型网站使用，也被描述为in this article。

有人知道如何使用 Angular CLI v10+ 做到这一点吗？理想情况下，我想添加一个 webpack 插件，同时保留 CLI 进行编译，或者使用最小占用空间的类似方法，显然仅用于生产构建。

【问题讨论】：

我相信这个问题不应该被关闭，我也一直在寻找一种方法来做到这一点...... +1

了解人们要求关闭它的原因是有建设性的。

【参考方案1】：

您可以使用ViewEncapsulation API 实现一些目标。默认情况下，它使用Emulated 生成较大的 CSS 类名。如果您在组件中将其更改为ShadowDom。这将封装样式并将所有内容转换为使用 Shadow DOM。使用 Shadow DOM，样式不会泄露到组件之外。不过，您必须对其进行测试并检查浏览器的支持，因为并非所有地方都支持它。此外，全局样式可能无法按您的预期工作。

编辑：我还发现了这个interesting article，它使用 Angular 解释了类似的事情。