導入

ミニファイとは

ミニファイとは、コードを取得し、さまざまな手法を使用してそのディスク上のサイズを縮小するプロセスです。
CSSファイルの本来のセマンティクスを維持し、可逆的なgzipなどの手法とは異なり、ミニファイは本質的に不可逆的なプロセスであり、たとえば、値をより小さい同等要素に置き換えたり、セレクターをマージしたりできます。

ミニファイ手順の最終的な成果物は、生成されたコードが元のファイルと同じように動作するというものです。
ただし、一部のパーツはサイズを可能な限り縮小するために変更されます。
gzip圧縮をミニファイと組み合わせることで、ファイルサイズの最大限の削減につながります。

cssnanoとは

cssnanoはそのようなミニファイの1つで、Node.jsで記述されています。
これはPostCSSプラグインで、ビルドプロセスに追加できます。
これにより、生成されるスタイルシートが本番環境に可能な限りコンパクトになるようにできます。

ビルドプロセスが何であるかわからない場合は心配はいりません。
スタートガイドで説明しています。

利点は

数多くの最適化

空白の削除などの単純な変換から、別々の名前を持つ同一のキーフレームをマージできる複雑な変換まで、さまざまな最適化を提供しています。
詳細についてはプリセットガイドを参照してください。

統合されたCSS処理

cssnanoは、内部的にCSSを処理するためにPostCSSを使用しています。
多くの最新のCSSツールがPostCSSを使用しているため、単一の抽象構文木（AST）で作業するためにそれらを構成できます。
つまり、CSSを複数回解析する必要がないため、全体的な処理時間が短縮されます。

最新のアーキテクチャとモジュール性

当社ではPostCSSを使用しているため、cssnanoの責任を、それぞれ小さな最適化処理を実行する複数のプラグインに分割できます。また、多くの最適化処理が特定のサブセットCSSプロパティーに限定されるため、正規表現を使用して全体としてCSSを最小化する事に比べてはるかに安全です。

最終更新日：2024年6月5日 (水) 10:27:34 GMT