web-dev-qa-db-ja.com

デプロイする前に、HTMLクラス属性とCSSセレクターを圧縮するツールはありますか？

現在のプロジェクトでは、HTMLクラス属性と対応するCSSセレクターを圧縮するように求められましたデプロイ前。たとえば、本番環境のコードは：

<div class="foo">
  <div id="bar"></div>
</div>

.foo {/*Style goes here*/}
#bar {/*Style goes here*/}

展開時、HTMLクラスと対応するCSSセレクターを置き換えたい：

<div class="a">
  <div id="b"></div>
</div>

.a {/*Style goes here*/}
#b {/*Style goes here*/}

この圧縮をアーカイブするために利用できるツールは何ですか？

htmlcsscompression
38
steveyang

本当にクラス名の名前を変更したい場合（Madmartiganが言ったことを覚えておいてください） Google Closure Stylesheets そうします。これはやり過ぎです。YUICompressorまたはその他のミニファイ+ gzippingツールを使用すると、十分なパフォーマンスが向上しますが、それは可能です。 .jsファイルとhtmlテンプレートに適切な変更を加えるには、他のクロージャーツールを使用する必要があります。

14
Litek

これは驚くほど近視眼的です。

  • ステップ1：WebサーバーでGZipまたはZlib圧縮をオンにする
  • ステップ2：すべてのテキストが圧縮されます。多くの場合70％以上圧縮されます
  • ステップ3：ステップ3はありません。
  • ステップ4：利益
5
Tyler Eaves

ノードでコードを処理する場合は、「rename-css-selectors」というプロジェクトもあります。

https://www.npmjs.com/package/rename-css-selectors

ほぼすべてのビルドツール（webpack、parcel、gulpなど）用のプラグインがあります。

https://github.com/JPeer264/node-rcs-core#plugins

これにより、HTML、JS、およびCSSファイル（実際には必要なファイル）内のすべてのCSSセレクターが縮小されます。最後にCSSファイルサイズの20％を節約しました。

5
Jan Peer

Gzippingを使用したミニファイには何の問題もありません。最新のブラウザーがソースマップを導入する前でも、gzippingと組み合わせて使用​​した場合でも大幅な節約が得られるため、ミニファイはベストプラクティスでした。パフォーマンスの向上はそれだけの価値があるため、本番環境での読みやすさの低下に我慢しました。ソースマップがあれば、ケーキを食べて食べることができます。大規模なサイトのhtmlページでミニファイとgzipを組み合わせた場合の効果を示す良い記事があります： http://madskristensen.net/post/effects-of-gzipping-vs-minifying-html-files

得られる節約の違いは、縮小されるコードのグリフ分布によって大きく異なるため、結果は縮小戦略と縮小される言語、さらにはコーディングスタイルによっても異なります。平均的な場合、節約は依然として重要です。

ミニファイは、グリフを凝縮するだけでなく、コードを再構築して不要な文字を削除すると同時に、gzippingでは不可能な同じ効果を実現することもできます。

ここで、特定の質問に戻るために、あなたの場合、クラスのグリフを縮小したいとします。これはいくつかの理由で行うのが難しいです。これらのグリフのスコープは、1つのファイルのローカル部分にスコープすることが可能であるのとは対照的に、複数のファイル間で行われます。 javascriptを縮小する場合、グローバルスコープ変数は別のスクリプトで必要になる可能性があるため、デフォルトでは置き換えられませんが、CSSでは、どのクラスがローカルで、どのクラスが別のファイルで定義されているかがわかりません。さらに悪いことに、クラスを介してコード内のDOM要素を見つけることは非常に一般的であるため、クラス置換をjavascriptにも同期する必要があります。クラスはJavaScriptで動的に構築される可能性があるため、これを同期することは不可能であり、その問題がなくても、それは大きな試練になります。コーディングスタイルを変更して、cssクラス文字列が使用されている場所を明示的に識別する場合にのみ、JavaScriptでグリフ置換を同期できます： https://code.google.com/p/closure-stylesheets/#名前の変更

幸いなことに、グリフの置換はミニファイが行うことであり、gzipも非常にうまく機能するため、その特定のミニファイ戦略によるサイズの節約は、グリフを完全に削除する他の戦略よりもはるかに少なくなります。

2
TimE

gulp-selectors もあります。

それをインストールします：

_npm install gulp gulp-selectors
_

さて、手っ取り早いnodeスクリプト：

_var gulp = require('gulp');
var gs = require('gulp-selectors');
gulp
  .src(['*.html', '*.css'])
  .pipe(gs.run({}, '{ids: "*"}'))
  .pipe(gulp.dest('.'))'
_

gs.run()の2番目の引数は、IDをそのままにするためです。Webサイトも参照してください： https://www.npmjs.com/package/gulp-selectors

1
phk

Cssには YUIコンプレッサー があります。不要な空白が削除され、まだ使用していない場合はプロパティが省略形に変換されます。 htmlに関しては、私は何も知りませんが、htmlの空白をトリミングすることが常に安全であるとは限らないことを覚えています。

0
Litek

プラグインがあります https://github.com/vreshch/optimize-css-classnames-plugin Webpackローダーとして機能します。それはほとんどの場合うまくいくかもしれません

0
Vreshch Volodymyr