ASP.NET MVC のあまり知られていない秘密を探る (1): LESS_html/css_WEB-ITnose のサポート

ASP.NET MVC3 (以降) では、ASP.NET パフォーマンス最適化作業の一部として、js や css などのファイルをバンドル (Bundling) および圧縮 (Minification) する機能があります。

考えてみてください。昔、mvc2 の時代に、次のような方法で js と css ファイルを導入しました:

<script type="text/javascript" src="@Url.Content("~/Script/Script.js")"></script>

なぜ

初めは問題ありませんでしたが、プロジェクトが大きくなるにつれて、次のことが必要になりました。リソース ファイルの数が増えると、次の問題が必然的に発生します:

1. これらのファイルは、本番環境では圧縮バージョン (例: jQuery.xxx.min.js) に置き換える必要があります
2. CSS ファイルは次のような問題に遭遇する必要があります他のソースから借用する 圧縮するツール
3. 管理が難しいファイルがどんどん導入される
4. 大量のリソース ファイルによりブラウザの読み込みが遅くなる

方法

ASP.NET MVC3 のリリース後、以上の問題に悩まされる必要があります。

まず、Web.config ファイルの System.Web/Compilation@debug が false に設定されている場合 (運用環境では false に設定する必要があります)、最適化スイッチをオンにすると、次のようになります。ブラウザ側 リソースファイルは圧縮されてバンドルされます。この利点は次のとおりです。

1. サーバー側のトラフィックを削減し、サーバーの発熱を軽減します (圧縮を通じて)
2. サーバー側が変更されない場合、リソース ファイルは (キャッシュ メカニズムを通じて) 自動的にキャッシュされます
3. ほとんどのブラウザではホストへの同時接続の数が制限されているため、(バンドルによって) Web サイトへのアクセスが高速化されます

以下は簡単な例です。ここでは、新しい ASP.NET MVC プロジェクトを使用して説明します。新しい MVC プロジェクト 最後に、App_Start/BundleConfig.cs ファイルを開くと、静的な RegisterBundles メソッドが表示されます。このメソッドは、RegisterRoutes メソッドと同様、アプリケーションが初めて読み込まれるときに呼び出されます。つまり、すべてのバンドルと圧縮が行われます。操作 アプリケーションのロード時に一度実行され、今後は直接参照されます。アプリケーションが起動され、バンドルに登録されているリソース ファイルに対して手動介入が実行された場合、MVC はこの部分のみをリロードして圧縮します。

この RegisterBundles メソッドの本体では、BundleTable.EnableOptimizations 静的プロパティを設定できます。つまり、Web サイトが運用環境にある場合、CSS や JS などのファイルはデフォルトで True に設定されます。もちろん、この動作を False に設定して整理することもできます。メソッド本体で、 BundleCollection パラメータのメソッドを追加します:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(                      "~/Scripts/bootstrap.js",                      "~/Scripts/respond.js"));

ここで、「~/bundles/bootstrap」は、View ファイルで参照する場合、2 つのファイル「~/Scripts/bootstrap.js」と「~/」が​​仮想パスになります。 Scripts/respond.js" が実際に読み込まれます。 Include メソッドのパラメーターは文字列型のパラメーター グループであるため、次の方法で任意の数のファイルを追加し、それらを View ファイルに適用できます:

@Scripts.Render("~/bundles/bootstrapr")

バンドル メカニズムは CDN もサポートしています

var jqueryCdnPath = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js";            bundles.Add(new ScriptBundle("~/bundles/jquery",                        jqueryCdnPath).Include(                        "~/Scripts/jquery-{version}.js"));

この記事のポイントは、このバンドルと圧縮メカニズムを直接使用して LESS をコンパイルすることです。ただし、LESSCSS を使用してブラウザ側で LESS をコンパイルすることもできます。 、コンパイル済み CSS ファイルを取得することはできません。多くの場合、それが期待したものであるかどうかを判断するために取得する必要があります。

LESS の概要とその利点については、ここを参照してください

まず、ドットレス パッケージを追加する必要があります:

その後、プロジェクトの Content ディレクトリに StyleSheet1.less を追加しました。コードは次のとおりです。

@color:#F7F7F7;body{    background-color:@color;}

現時点では、クライアントへの最終出力はコンパイルされた CSS ファイルであるため、IIS が接尾辞の小さいファイルに 404 を返すことを心配する必要はありません。

BundleRegister メソッドに、次のコードを追加します。

var lessbundle = new Bundle("~/bundles/less").Include("~/Content/*.less");            lessbundle.Transforms.Add(new LessTransform());            lessbundle.Transforms.Add(new CssMinify());            bundles.Add(lessbundle);

コードの最初の行では、サフィックスlessを持つすべてのファイルのバンドルをContentディレクトリに追加し、2行目でLESS変換を追加しました。この関数は dotless によって提供されます。 3 行目は、このバンドルを圧縮する機能を追加します。これにより、本番環境では、コンパイルおよび圧縮された CSS コードが取得されます。次のようなコードが見つかります:

<link href="/bundles/less?v=vnAgv976RJi72MAy6iBw7DhQ9yxBbhXMXY0yOqNN5BU1" rel="stylesheet"/>

このパスを開くと、コンパイルされた CSS コードが表示されます:

body{background-color:#f7f7f7}

運用環境では、さらに一歩進んで CSS 内の空白文字を削除します。 CSS ファイルは小さく、私の例は実際には同じであるため、違いは分かりません。

この記事は以上です。最近、職場での出来事が非常に不安です。技術者の潔癖症と過敏性は本当にひどいです。