使用 Angular CLI 缩小 CSS 类名称

Question

我正在寻找一种通过缩小应用程序的 CSS 类名来提高性能的方法。这种方法被大型网站使用，并且也在本文中进行了描述。

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

Answer 1

您可以使用 ViewEncapsulation API 实现一些目标。默认情况下，它使用

Emulated

生成大型 CSS 类名。如果您在组件中将其更改为

ShadowDom

。这将封装样式并将所有内容转变为使用 Shadow DOM。使用 Shadow DOM，样式不会泄漏到组件之外。不过，您必须对其进行测试并检查浏览器是否支持，因为并非所有地方都支持它。此外，全局样式可能无法按您的预期工作。

编辑：我还发现了这篇有趣的文章，它使用 Angular 解释了类似的内容。

Answer 2

Breezify 正是您所需要的 – [https://github.com/glebgorokhov/breezify][1]

安装和使用非常简单：

• npm i -d breezify

• breezify init

然后将创建配置文件，确保

files.buildDir

和

files.outputDir

正是您想要的，然后将

breezify do

集成到您的构建命令中，如下所示：

// package.json
// Replace this:
{
  scripts: {
    build: "ng build"
  }
}

// With this:
{
  scripts: {
    build: "ng build && breezify do"
  }
}


  [1]: https://github.com/glebgorokhov/breezify