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

眺める: 24089|答える: 8

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

[リンクをコピー]
2022年3月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物理ファイルを生成しない)、構成コードは以下の通りです。

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



参考:

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





先の:C# 8.0はヌル参照型として扱えます
次に:[実戦]。 NET 6 ランダム生成は乱数検定を生成します
 地主| 2022年3月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年3月29日 00:38:21に投稿 |
学ぶことを学びましょう。
2022年4月6日 12:02:33に投稿 |
Ligershark.WebOptimizer.Core と WebMarkupMin.AspNetCore6 はどちらも試しました
 地主| 2022年4月6日 13:45:12に投稿 |
johnyoung 2022年4月6日 12:02 投稿
Ligershark.WebOptimizer.Core と WebMarkupMin.AspNetCore6 はどちらも試しました

どちらが良いか
2022年4月6日 14:53:12に投稿 |
この投稿は2022年4月6日14:56にjohnyoungによって最終編集されました。

(重複コメントの削除方法がわかりません。ウェブマスターがこの投稿を見たら削除してください)
2022年4月6日 14:54:11に投稿 |

私の基本的な理解はこうです:前者はjsとcssファイルをバンドルして圧縮すること、後者はページ上のhtmlやjs、cssコードを圧縮し、ページ上でHTTP圧縮を行うこと、そして後者がjsやcssファイルをバンドルして圧縮できるかどうかははっきりしません。 私は試してみましたが、深く使いませんでした。 また新しい記事を探求し投稿するのを楽しみにしています。
 地主| 2024年4月24日 15:35:15に投稿 |
CSSやjsを圧縮せずに開発環境を設定できます。コード:




 地主| 2024年10月10日 11:28:22に投稿 |
フロントエンドではMinifyを使って複数のCSSファイルを圧縮・マージします
https://www.itsvse.com/thread-10845-1-1.html
免責事項:
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。

Mail To:help@itsvse.com