web-dev-qa-db-fra.com

Angular-cli peut-il supprimer les CSS inutilisés?

jusqu'à présent, le plus petit bundle que je peux créer avec angular cli est en exécutant

ng build --aot true -prod

Je me demandais si le processus de construction supprime également les classes CSS inutilisées, par exemple de bootstrap?

Sinon, comment puis-je y ajouter des bibliothèques comme purifycss?

EDIT avril 2018

Je n'ai toujours pas trouvé de solution satisfaisante à son problème, en particulier une solution compatible avec les modules de chargement paresseux à angle ...

À votre santé

csswebpackminifyangular-cliangular2-aot
39
Han Che

Vous pouvez peut-être jeter un œil à https://github.com/Angular-RU/angular-cli-webpack . Cela vous donne la possibilité de modifier la configuration du webpack sans éjecter. Et devinez quel est le premier exemple: Supprime les sélecteurs inutilisés de votre CSS . Je ne l'ai pas essayé moi-même mais cela pourrait être une option.

1
Tobske
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')),
    })
  ]

};

installez d'abord purifycss webpack

1
Akanimo

J'ai fait des recherches récemment à ce sujet, mais je n'ai trouvé aucun moyen vraiment sûr de supprimer les CSS inutilisés. Cependant, je suis tombé sur quelques outils qui vous aideraient à détecter le code mort dans VS Code. Il y a un extension qui n'est pas parfait mais semble prometteur. J'ai également fait des recherches sur la façon de supprimer les CSS Angular Material CSS si vous les utilisez) et j'ai créé une vidéo à ce sujet. Vous pouvez vérifiez ceci ici .

Mais au moins maintenant (en 2020), il n'y a aucun moyen fiable d'atteindre ce que vous voulez et de voir également un réponse de Angular membre de l'équipe principale à ce sujet

0
Dmytro Mezhenskyi

Si vous êtes éjecté, c'est-à-dire ng eject . Ensuite, vous pouvez personnaliser la construction du webpack pour faire presque tout. J'ai quelques options activées pour minimiser les styles dans le cadre de la construction avec minifyCSS dans deux des 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
    },
0
Brandon Søren Culley

Je ne sais pas si cela compte comme réponse car ce n'est pas vraiment lié à angular-cli, mais j'ouvre mon projet en texte sublime, et je lance nusedCssFinder , qui met en évidence toutes les propriétés inutilisées dans mon css fichier.

0
sodimel

Si vous utilisez un pack Web, vous pouvez le faire comme: -

Tout d'abord, installez 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')),
    })
  ]

};

Visitez le lien ci-dessous pour une compréhension détaillée.

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

0
Yashwardhan Pauranik