ASP.NET コア(12)フロントエンドJS、CSSバンドル、圧縮

クズども · 掲載地 2022/03/28 20:55:50

要件:以前の.NET Framework MVCプロジェクトでは、JSやCSSをMicrosoftのMicrosoft.AspNet.Web.Optimizationライブラリを使ってバンドルし圧縮できます。 ASP.NET Coreを使った後、既存のJSやCSSファイルをどうやって束ねて圧縮すればいいですか?

.NET Frameworkプロジェクトは以下の点を参照しています:

ログインが見えます。

サンプルコード:

ログインが見えます。

バインディング

バンドルは複数のファイルを1つのファイルにまとめます。バンドルはウェブページなどのウェブ資産をレンダリングするために必要なサーバーリクエスト数を減らします。 CSSやJavaScriptなど向けに、個別のバンドルをいくつでも作成できます。ブラウザからサーバー、またはアプリケーションを提供するサービスからのファイル数が少なくなるHTTPリクエストの減少。これによりホームページの読み込み性能が向上します。

圧縮する

機能を変えずに不要な文字を削除してください。その結果はCSS、画像、JavaScriptファイルなどの要求されるリソースのサイズが大幅に削減されます。ミニピューションの一般的な副作用には、変数名が1文字に短縮されたり、コメントや不要なスペースが削除されたりすることが挙げられます。同時に、コードを混乱させてくださいこれは他の競合他社が私たちのソースコードを読むのに適していません。

バンドルと圧縮によるパフォーマンス向上

以下の表は、個別の資産を読み込むこととバンドルやミニフィケーションを使うことの違いを示しています。

これによりトラフィックを節約し、ネットワークの伝送速度を向上させるとともに、HTTPリクエストを減らし読み込み速度を向上させます。

HTTPリクエストヘッダーに関しては、ブラウザが非常に詳細に処理されています。バンドルすると、送信バイト数の総数は大幅に減少します。ロード時間は大幅に改善されていますが、この例はローカルで動作します。バンドルやミニフィケーションは、ネットワーク上で転送される資産と組み合わせることで、より高いパフォーマンス向上を実現できます。

ASP.NET Coreには独自のバンドルおよび圧縮ソリューションがなく、サードパーティが提供するソリューションを使用する必要があります。この記事ではLigerShark.WebOptimizer.Core(図書館から電話がかかってきた。)ニューグリファイJavaScriptとCSSのハンドリングを実装)、GitHubアドレス:ハイパーリンクのログインが見えます。

まず、Core 6 ASP.NET 新しいプロジェクトを作成し、以下のコマンドを実行して参照します。

ログインが見えます。

プロジェクトwwwroot内に新しい静的フォルダを作成し、テスト用のcssとjsファイルを保存します。以下のように新しいCSSおよびJSファイルを作成します:

Program.csファイルを修正し、WebOptimizerサービスとミドルウェアを追加してください。メインコードは以下の通りです:

ログインが見えます。

プロジェクトを始めようとすると、CSSコードとJSコードの両方のコメントが削除され、ファイルが圧縮され、JSの一部の変数が1文字に縮小されていることがわかります。以下の図に示されています。

その後、静的フォルダから新しいjsファイルを作成し、バンドル機能をテストします。test.jsとtest2.jsを1つのcommon.jsファイルにまとめます(common.js物理ファイルを生成しない)、構成コードは以下の通りです。

ログインが見えます。

レンダリングは以下の通りです:

参考：

ハイパーリンクのログインが見えます。
ハイパーリンクのログインが見えます。

クズども · 掲載地 2022/03/28 20:56:47

復習：

ASP.NET Core(XI)エンドポイントルートは、すべてのDIサービスを表示するためのミドルウェアを追加します
https://www.itsvse.com/thread-10269-1-1.html

ASP.NET Core(10)における構成優先度の詳細な説明。
https://www.itsvse.com/thread-10265-1-1.html

ASP.NET Core (9)のミドルウェアミドルウェアの詳細な説明。
https://www.itsvse.com/thread-9647-1-1.html

ASP.NET コアミドルウェアの詳細な説明
https://www.itsvse.com/thread-8126-1-1.html

Core(8)のSwagger UIのデフォルトパラメータの穴 ASP.NET。
https://www.itsvse.com/thread-9640-1-1.html

ASP.NET コア(7) フレームワークソースコードの詳細な分析
https://www.itsvse.com/thread-9601-1-1.html

ASP.NET Core (VI) DIはオブジェクト注入の方法を手動で取得します
https://www.itsvse.com/thread-9595-1-1.html

ASP.NET コア(5)はCAP分散トランザクションに基づいています
https://www.itsvse.com/thread-9593-1-1.html

ASP.NET Core(4) フィルター統一モデルステートモデル検証
https://www.itsvse.com/thread-9589-1-1.html

ASP.NET コア(iii) ActivatorUtilitiesを用いて動的にインスタンスを作成する
https://www.itsvse.com/thread-9488-1-1.html

ASP.NET コア(2) コードによるアプリケーションの再起動
https://www.itsvse.com/thread-9480-1-1.html

ASP.NET Core(1)はRedisキャッシュを使用しています
https://www.itsvse.com/thread-9393-1-1.html

トビウオ · 掲載地 2022/03/29 0:38:21

学ぶことを学びましょう。

ジョニョン · 掲載地 2022/04/06 12:02:33

Ligershark.WebOptimizer.Core と WebMarkupMin.AspNetCore6 はどちらも試しました

クズども · 掲載地 2022/04/06 13:45:12

johnyoung 2022年4月6日 12:02 投稿
Ligershark.WebOptimizer.Core と WebMarkupMin.AspNetCore6 はどちらも試しました

どちらが良いか

ジョニョン · 掲載地 2022/04/06 14:53:12

この投稿は2022年4月6日14:56にjohnyoungによって最終編集されました。

(重複コメントの削除方法がわかりません。ウェブマスターがこの投稿を見たら削除してください)

ジョニョン · 掲載地 2022/04/06 14:54:11

リトルスラッグ 2022年4月6日 13:45に投稿
どちらが良いか

私の基本的な理解はこうです:前者はjsとcssファイルをバンドルして圧縮すること、後者はページ上のhtmlやjs、cssコードを圧縮し、ページ上でHTTP圧縮を行うこと、そして後者がjsやcssファイルをバンドルして圧縮できるかどうかははっきりしません。私は試してみましたが、深く使いませんでした。また新しい記事を探求し投稿するのを楽しみにしています。

クズども · 掲載地 2024/04/24 15:35:15

CSSやjsを圧縮せずに開発環境を設定できます。コード:

ログインが見えます。

クズども · 掲載地 2024/10/10 11:28:22

フロントエンドではMinifyを使って複数のCSSファイルを圧縮・マージします
https://www.itsvse.com/thread-10845-1-1.html

[出典] ASP.NET コア(12)フロントエンドJS、CSSバンドル、圧縮

関連記事

閲覧したセクション