CODEWITHSUNDEEP
cssangularangular-climinify
John White
John White

Reputation: 977

Minify CSS class names with Angular CLI

I'm looking for a way to improve performance by minifying my app's CSS class names. This approach is used by large websites and is also described in this article.

Does anybody have an idea on how to do this with Angular CLI v10+ ? Ideally I'd want to add a webpack plugin while keeping the CLI for compilation, or a similar approach with minimal footprint, obviously for production builds only.

Upvotes: 4

Views: 957

Answers (2)

Gleb Gorokhov
Gleb Gorokhov

Reputation: 41

Breezify does exactly what you need.

Installation and usage are pretty simple:

  • npm i -d breezify
  • breezify init

Then the config file will be created, make sure files.buildDir and files.outputDir are exactly what you want, then integrate breezify do into your build command like that:

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

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

Then just build your project as you usually do.

Upvotes: 0

Ahmad Alfy
Ahmad Alfy

Reputation: 13381

You can achieve something using the ViewEncapsulation API. By default it uses Emulated which generate large CSS class names. If you change that in your components to ShadowDom. This will encapsulate the styles and will shift everything to use Shadow DOM. With Shadow DOM the styles won't be leaked outside the components. You have to test it though and check for browsers support because it's not supported everywhere. Also, global styles might not work as you expect.

Edit: I also found this interesting article that explain something similar using Angular.

Upvotes: 0

Related Questions