Can angular-cli remove unused css?

Question

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

Answer 1

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

Answer 2

Maybe you can have a look at https://github.com/Angular-RU/angular-cli-webpack. This gives you the possibility to change the webpack configuration without ejecting. And guess what the first example is: Removes unused selectors from your CSS. I have not tried it myself but it might be an option.

Answer 3

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
       },