CODEWITHSUNDEEP
csswebpackminifyangular-cliangular2-aot
Han Che
Han Che

Reputation: 8519

Can angular-cli remove unused css?

so far the smallest bundle I can create with angular cli is by running

ng build --aot true -prod

I was wondering if the build process also removes unused css classes e.g. from bootstrap?

If not how can I add libraries like purifycss to it?

EDIT April 2018

I still did not find any satisfying solution to his problem, especially one that is compatible with the lazy loading modules with angular...

Cheers

Upvotes: 53

Views: 22125

Answers (6)

Carnaru Valentin
Carnaru Valentin

Reputation: 1885

In Angular the best option you have is to create a separate CSS file for each component and use ViewEncapsulated.Emulated.

And in this file you will add just CSS used by this component. You can discover styles used by each page with "coverge" from Google Chrome

Upvotes: -1

Dmytro Mezhenskyi
Dmytro Mezhenskyi

Reputation: 265

I did some research recently about this, but I could not find any really safe way of how to remove unused CSS. However I came across some tools which would help you detect dead-code in VS Code. There is an extention which is not perfect but looks promising. Also I did some investigation of how to remove unused Angular Material CSS (if you use it) and created a video about it. You can check this out here.

But at least now (in 2020) there is no any reliable way to achieve what you want and see also an answer from Angular Core Team member about this topic

Upvotes: 11

Akanimo
Akanimo

Reputation: 39

module.export={
  plugins: [
    new ExtractTextPlugin('[name].[contenthash].css'),
    // Make sure this is after ExtractTextPlugin!
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'app/*.html')),
    })
  ]

};

install purifycss webpack first

Upvotes: 1

sodimel
sodimel

Reputation: 916

Don't know if this count as an answer because it's not really related to angular-cli, but I open my project in sublime text, and I launch UnusedCssFinder, which highlight all the unused properties in my css file.

Upvotes: 0

Brandon Culley
Brandon Culley

Reputation: 1344

If you are ejected, i.e. ng eject. Then you can customize the webpack build to do most anything. I have a couple options turned on to minimize styles as part of the build with minifyCSS in two of the plugins.

  1. LoaderOptionsPlugin

    new LoaderOptionsPlugin({
  "sourceMap": false,
  "options": {
    "html-minifier-loader": {
        "removeComments": true,
        "collapseWhitespace": true,
        "conservativeCollapse": true,
        "preserveLineBreaks": true,
        "caseSensitive": true,
        "minifyCSS": true
    },

  2. HtmlWebpackPlugin

    new HtmlWebpackPlugin({
  "template": "./src\\index.ejs",
  "filename": "./index.html",
  "hash": true,
  "inject": true,
  "compile": true,
  "favicon": 'src/assets/Flag.png',
  "minify": {
      collapseWhitespace: true,
      removeComments: true,
      minifyCSS: true
    },

Upvotes: 0

Yashwardhan Pauranik
Yashwardhan Pauranik

Reputation: 5566

If you are using web pack then you can do it as:-

First, install purifycss-webpackusing npm i -D purifycss-webpack

module.export={
  plugins: [
    new ExtractTextPlugin('[name].[contenthash].css'),
    // Make sure this is after ExtractTextPlugin!
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'app/*.html')),
    })
  ]

};

Visit the link below for the detailed understanding.

https://github.com/webpack-contrib/purifycss-webpack

Upvotes: 0

Related Questions