つの文字CSSクラス名ハッシュ戦略を通して

1つの文字名戦略とFilePathへの分割のために変更標準CSS classnameハッシュを通してファイルサイズの40 %に束圧縮を改善します.
我々はCSSモジュールを使用するスタイルのための反応ライブラリに基づいてWebサイトを開発する.CSSモジュールの主なアイデアは、コンポーネントの鳥と猫を作成することができます、彼らは両方のスタイルがあります.CSSとCSSクラス.ブロック内のこのCSSクラスは各コンポーネントごとに異なります.
サンプルファイル:

/* Bird / styles.css */
.block { }
.name { }
/* Cat / styles.css */
.block { }
.name { }

それはロケット科学ではありません:Webpackでは、localidentnameを持つCSSローダーでスタイルを処理します.すべてのクラスが名前を変更され、誰が誰であるかを理解するためにソースとマップされます.最も簡単なケースでは、我々は束を持っています.スタイルとスタイルのCSS.クラス名マッピングのための.
2つの独立したクラス名を持っています.

/* Bird */
.k3bvEft8 { }
.f2tp3lA9 { }
/* Cat */
.epIUQ_6W { }
.oRzvA1Gb { }

ビルドを実行してファイルを圧縮しましょう.例えば、300 KBのCSSファイルはGZIP(またはBlotliで50 KB)で70 KBに詰め込まれるでしょう.それは、生成ハッシュが圧縮されていないからです.圧縮アルゴリズムはすべてのシーケンスを見つけることができません.
これで何ができるのですか.その作業中に、Webpackはファイルのツリーを非同期的に読み込み、クラス名を解析します.プラグインはファイルパスとクラス名をファイルのいずれかから取得しますが、単一ファイル内の順序は保持されます.ファイル名をキャッチし、ファイルパスを知ることができれば、ハッシュを自分で作ることができます.ハッシュ名の代わりにただ一つのシンボル名を持つCSSクラスを作りましょう.例えば、[ A - ZA - Z ] +シンボルを取るなら、52ビット符号化を使用してください.(またはA - ZA - Z 0 - 9 - 0 - +)の64ビットですが、名前の最初の番号に注意してください -  そのためにシールドプレフィックスが必要です
名前は以下のように変更されます:

/* Bird */
.a { }
.b { }
/* Cat */
.c { }
.d { }

これは良いことですが、サーバーのWebPack設定でこれを実行すると、ファイルをランダムな順序で取得できます.

/* Bird */
.c { }
.d { }
/* Cat */
.a { }
.b { }

こんにちは、ミスマッチ!
それを修正するには、すべてのパスからルールの入力を覚えて、すべてのファイルのローカルカウント位置を保存しようとしてみましょう.0 [' a 'シンボル]から各ファイルでカウントを行います.( 51 - Nルールは' z 'となり、52 - nルールは' ba 'などとなります).
これを得る

/* Bird */
.a { }
.b { }
/* Cat */
.a { }
.b { }

すべてのファイルの中にユニークな名前がありますが、多くのファイルがあります.FilePathのためにクラス名のためにではなく、ハッシュを作ります.
フィンナートゲット

/* Bird */
.a_k3bvEft8 { }
.b_k3bvEft8 { }
/* Cat */
.a_oRzvA1Gb { }
.b_oRzvA1Gb { }

(ファイルハッシュは常に固定長を持っているので、' no ' separatorは必要ありません.
以前とほとんど同じ名前を取得しますが、ここではクラス名のシーケンスを厳密に示します.サンプルでは、CSS 50 KBとJS 47 KBからCSS 30 KBとJS 28 KB [ 58 KB sum , br ]を得ました.
利益〜40 KBといくつかの最初のペイントパフォーマンス.
GetLocalidentを使用して、Capital LoaderからのWeb Packの設定を取得し、メソッドを呼び出します.
P . S .より深く行って、本当に小さい名前を作りたいならば、あなたはWebpackが主な糸を走らせる前にCSSファイルツリーマップを作ることができて、それをソートして、そのようなクラス名に名前をつけます.
これは、あなたにより多くの圧縮効果を与えます:47 KB両方のファイルのために、あなたに60ポンドの利益を与えられたサイズで与えてください.
ウェブ高速再び!
あなたはhttps://github.com/webpack-contrib/css-loader/issues/1028でコードを見ることができます
更新:生産現場で我々は*から93 %を保存します.CSSとスタイル.js1.1 MBのアンパックファイルの71.6 KBしか転送しません.
更新2 :我々はハッシュ名の完全なマップを持っているように、我々はHashlen(File Path Hash)を最適使用することを提案することができます.例えば、生産時は長さ＝8であったが、4に変更した.それは、あらゆるページ(HTML + JS + CSS)のために、14 KB ~を受けました.参照.