web-dev-qa-db-ja.com

angular-cliは未使用のcssを削除できますか？

これまでのところ、angularで作成できる最小のバンドルは、

ng build --aot true -prod

ビルドプロセスで未使用のcssクラスも削除されるかどうか疑問に思っていました。ブートストラップから？

そうでない場合、purifycssなどのライブラリをどのように追加できますか？

2018年4月編集

私は彼の問題に対する満足のいく解決策をまだ見つけられませんでした、特に角度付きの遅延読み込みモジュールと互換性のあるものは...

乾杯

csswebpackminifyangular-cliangular2-aot
39
Han Che

多分あなたは https://github.com/Angular-RU/angular-cli-webpack を見ることができます。これにより、イジェクトせずにWebpack構成を変更できる可能性があります。 CSSから未使用のセレクターを削除します。私自身は試していませんが、オプションかもしれません。

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

};

最初にpurifycss webpackをインストールしてください

1
Akanimo

私は最近これについていくつかの調査を行いましたが、未使用のCSSを削除するための本当に安全な方法を見つけることができませんでした。しかし、VS Codeでデッドコードを検出するのに役立つツールに出くわしました。 extention がありますが、これは完璧ではありませんが有望に見えます。また、未使用のAngularマテリアルCSS（使用している場合））を削除する方法について調査し、それについてのビデオを作成しました。 こちらをご覧ください 。

しかし、少なくとも現在（2020年）、あなたが望むものを達成するための信頼できる方法はありません （Angularこのトピックについてのコアチームメンバーからの回答）も参照

0
Dmytro Mezhenskyi

追い出された場合、つまり ng eject 。次に、ほとんど何でもできるようにwebpackビルドをカスタマイズできます。 2つのプラグインでminifyCSSを使用したビルドの一部として、スタイルを最小限に抑えるためにいくつかのオプションをオンにしています。

  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

これはangular-cliに実際には関連していないため、これが回答としてカウントされるかどうかわかりませんが、プロジェクトを崇高なテキストで開き、css内のすべての未使用のプロパティを強調表示する nusedCssFinder を起動しますファイル。

0
sodimel

Webパックを使用している場合は、次のように実行できます。

まず、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')),
    })
  ]

};

詳細については、以下のリンクをご覧ください。

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

0
Yashwardhan Pauranik