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

回答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

回答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.

回答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.

LoaderOptionsPlugin

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

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

回答4:

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.

回答5:

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

来源：https://stackoverflow.com/questions/40330938/can-angular-cli-remove-unused-css

标签

css

Webpack

minify

angular-cli

angular2-aot