PurgecsやUNCSSなどの自動(dòng)ツールを使用して、未使用のCSSをスキャンおよび削除します。 2。Webpack、Vite、またはTailWindのコンテンツ構(gòu)成を介して、ビルドプロセスにパージを統(tǒng)合します。 3.必要なスタイルの削除を避けるために、パージする前に、Chrome DevtoolsカバレッジタブでCSSの使用を監(jiān)査します。 4.偶発的な除去を防ぐために、動(dòng)的に生成されたクラスまたは條件付きのクラスを動(dòng)的に生成または條件付けられたクラス。 5.代わりに、クリティカルCSSを抽出し、クリティカルハウスやペントハウスなどのツールを使用して殘りをレイジーロードします。パージの後に、機(jī)能性がそのままであることを確認(rèn)するために、常にテストします。

未使用のCSSのパージは、ファイルのサイズを削減し、ページの負(fù)荷速度を改善し、生産コードを合理化するのに役立ちます。効果的に行う方法は次のとおりです。

1。CSSパージツールを使用します（推奨）

最も信頼できる方法は、HTML、JavaScript、またはテンプレートファイルをスキャンして、使用されていないCSSルールを削除する自動(dòng)化されたツールを使用することです。

人気のあるツール：

• Purgecss - Webpack、Vite、Rollup、Standaloneなどのビルドツールで動(dòng)作します。
• UNCSS - 靜的サイトやnode.jsを使用する場合に最適です。
• Tailwind CSSを備えたPurgecs - tailwind.config.jsのcontent配列を介して組み込まれています。

プロジェクトのPurgecssの例：

 // purgecss.config.js
module.exports = {
  コンテンツ：['./src/**/*.html'、 './src/**/*.js']、
  CSS：['./src/**/*.css']、
  出力： './dist/purged/'、
  拒否：true、//削除されたものを參照してください
};

CLI経由で実行するか、ビルドスクリプトに統(tǒng)合します。

2。ビルドプロセスと統(tǒng)合します

ワークフローのパージの一部を作成するには：

• Tailwindユーザーの場合：
  purgeまたはcontentが設(shè)定されていることを確認(rèn)してください：

   // tailwind.config.js
  module.exports = {
    コンテンツ： [
      './src/**/*. {html,js,jsx、、tsx}'、
    ]、、
    テーマ： { ... }、
    プラグイン：[]、
  }

  次に、 NODE_ENV=productionでビルドして、テールワインドが自動(dòng)的にパージします。

• WebPackで： PurgeCSSPlugin使用してください。

   const purgecssplugin = require（ 'purgecss-webpack-plugin'）;
  const glob = require（ 'glob'）;
  const path = require（ 'path'）;
  
  プラグイン：[
    新しいPurgecssplugin（{
      パス：glob.sync（path.join（__ dirname、 'src/**/*。{js、html}'））、
    }）、
  ]

3。最初に監(jiān)査してから、パージします

何かを削除する前に、CSSの使用を監(jiān)査します。

• Chrome Devtoolsカバレッジタブ（ Ctrl Shift P →「カバレッジ」）を使用して、ページに未使用のCSSを確認(rèn)します。
• 大きくて未使用のチャンクを特定します。
• 調(diào)査結(jié)果に基づいて、手動(dòng)でスタイルを削除またはリファクタリングします。

これにより、過剰塗裝を回避するのに役立ちます（たとえば、動(dòng)的に注入されたクラスやJS依存スタイル）。

4.動(dòng)的クラスには注意してください

パージツールは常に検出することはできません。

• JavaScriptで動(dòng)的に生成されたクラス。
• 條件付きで使用されるユーティリティクラス（例： hidden 、 active 、 show-modal ）。
• フレームワーク固有のパターン（React、Vueなど）。

ソリューション：

• ホワイトリストクリティカルクラス：

   // purgecss.config.js
  DefaultExtractor：content => content.match（/[\ w-/：]（？<?。海?g）|| []、
  SafeList：[&#39;Opacity-0&#39;、 &#39;Translate-y-Full&#39;、 &#39;delay-300&#39;、 &#39;lg：col-span-2&#39;]、

• パージ後に徹底的にテストします。

---

5。代替：重要なCSSレイジーロードを使用します

グローバルにパージする代わりに、重要なCSS （倍以上のスタイル）を抽出し、殘りを怠zy-ロードします。

• ツール： critical 、 Penthouse 、またはオンラインジェネレーター。
• インライン臨界CSS、フルスタイルシートを非同期にロードします。

これにより、スタイルを完全に削除することなく、レンダリングブロッキングリソースが削減されます。

---

未使用のCSSをパージするだけのサイズだけでなく、パフォーマンスと保守性に関するものです。 Purgecssなどのツールを使用したり、フレームワークレベルの最適化（Tailwindなど）に依存していますが、常に実際のユーザーシナリオでテストしてください。

基本的に：スキャン、パージ、検証。複雑ではありませんが、テストをスキップすると簡単に臺(tái)無しになります。

以上が未使用のCSSをパージする方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。