この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

眺める: 2664|答える: 2

[ヒント] ASP.NET コア(27) パフォーマンス最適化 PurgeCSS で未使用コードを削除する

[リンクをコピー]
掲載地 2024/05/08 19:13:56 | | | |
要件:プロジェクト内では、TailwindCSS、Bootstrap、MaterializeCSS、Foundationなどのほぼすべてのフロントエンドフレームワークが参照されます。CSSスタイルの一部だけを使うことがあり、公開時に未使用のCSSコードを削除できます。ウェブサイトへのアクセスを高速化し、帯域幅とブラウザメモリを節約できます待つ。

PurgeCSSは未使用のCSSを削除するためのツールです。 開発ワークフローの一部にすることもできます。
ウェブサイトを作る際には、TailwindCSS、Bootstrap、MaterializeCSS、FoundationなどのCSSフレームワークを使うことを選ぶかもしれません...... ただし、フレームワークのごく一部しか使わず、使われていないCSSスタイルも多く含まれます。

ここでPurgeCSSの出番です。 PurgeCSSはあなたのコンテンツとCSSファイルを分析します。 その後、ファイル内のセレクターとコンテンツファイルのセレクターをマッチングします。 CSSから未使用のセレクターを削除し、CSSファイルが小さくなります。

ウェブサイト:ハイパーリンクのログインが見えます。
GitHubアドレス:ハイパーリンクのログインが見えます。

まず、以下のコマンドでnpmを使ってPurgeCSSパッケージをグローバルにインストールできます。


VSを使って新しい ASP.NET Core MVCプロジェクトを作成すると、プロジェクトはデフォルトでBootstrap 5スタイルを使用し、ブラウザで読み込みますbootstrap.min.cssファイルサイズ163kb、スタートプロジェクトは以下の通りです:



PurgeCSSで最適化を始め、プロジェクトのルートに新しいものを作成しますpurgecss.config.js設定ファイルは以下の通りです:

PurgeCSSの設定ファイルの参照は以下の通りです:

インターフェース UserDefinedOptions {
  content: Array<string | RawContent>;
  css: Array<string | RawCSS>;
  defaultExtractor?: ExtractorFunction;
  エクストラクター?: Array<Extractors>;
  fontFace?: boolean;
  キーフレーム?:ブール値;
  出力?: string;
  却下?:ブール;
  rejectedCss?: boolean;
  stdin?: ブール;
  STDOUT?: Boolean;
  変数?:ブール数;
  safelist?: UserDefinedSafelist;
  blocklist?: StringRegExpArray;
}

インターフェース RawContent {
  拡張:文字列
  生:ストリング
}

インターフェース RawCSS {
  生:ストリング
}

type StringRegExpArray = Array<RegExp | string>;

type ComplexSafelist = {
  standard?: StringRegExpArray;
  deep?: RegExp[];
  強欲?: RegExp[];
  変数?: StringRegExpArray;
  キーフレーム?: StringRegExpArray;
};

type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
ASP.NET Coreをフォルダに公開し、PurgeCSSを使ってコマンドラインから未使用のCSSスタイルを削除します。コードは以下の通りです:

以下に示すように:



公開されたプロジェクトを起動し、ブラウザで閲覧しますbootstrap.min.css最適化されたサイズは20.8 kb、下図に示されているように:



つまり、bootstrap.min.cssソースファイルサイズは163kbで、内部では20.8kbのクラススタイルしか使われていません。PurgeCSSが助けてくれます142KBのコンテンツが削除されました

(終わり)




先の:MVC ASP.NET Autofacを使ってグローバルフィルターを追加しています
次に:ASP.NET Core(28)は開発中のアプリケーション秘密を保存します
 地主| 掲載地 2024/05/08 21:07:25 |
.csprojリリース完了後は、下図のようにコマンドの実行を自動化することもできます。




構成は以下の通りです:


このメッセージタスクのデフォルト優先度は「通常」ですが、VSのデフォルトのログレベルは「最小」です。 メッセージをデフォルトのログレベルで表示したい場合は、重要度を高く設定してください。
 地主| 掲載地 2024/05/16 10:47:52 |
設定ファイルを使わずにコマンドラインで:

免責事項:
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。

Mail To:help@itsvse.com