component - style css angular 6

¿Puede angular-cli eliminar css no utilizados?

Question

Hasta ahora, el paquete más pequeño que puedo crear con cli angular es ejecutando

ng build --aot true -prod

Me preguntaba si el proceso de compilación también elimina las clases de css no utilizadas, por ejemplo, desde bootstrap?

Si no, ¿cómo puedo agregar bibliotecas como purifycss a ella?

EDITAR abril 2018

Todavía no encontré ninguna solución satisfactoria para su problema, especialmente una que sea compatible con los módulos de carga perezosa con ...

Aclamaciones

Answer 1

Quizás pueda echar un vistazo a https://github.com/Angular-RU/angular-cli-webpack . Esto le da la posibilidad de cambiar la configuración del paquete web sin expulsar. Y adivina cuál es el primer ejemplo: elimina los selectores no utilizados de tu CSS . No lo he intentado yo mismo, pero podría ser una opción.

Answer 2

Si es expulsado, es decir, github.com/angular/angular-cli/wiki/eject . Luego puedes personalizar la compilación del paquete web para hacer casi cualquier cosa. Tengo un par de opciones activadas para minimizar los estilos como parte de la compilación con minifyCSS en dos de los complementos.

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

Answer 3

Si está utilizando un paquete web, puede hacerlo como:

Primero, instale 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'')),
    })
  ]

};

Visita el enlace de abajo para la comprensión detallada.

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