🤲🏽 🤘 🖖🏼 ASP.NET WebアプリケーションでのCSSファイルとJSファイルの結合と圧縮 🌞 🛀🏿 🧓🏽

良い一日！

私はこのトピックに関する投稿を書くことを長い間考えていましたが、JavaScriptファイルの結合についてはこのトピックの後でのみ決定しました。

ASP.NETサイト用の優れたSquishItライブラリがあります。cssファイルを1つとJavaScriptファイルに結合できます。上記の記事や他の記事で既に述べたように、ユニオンの利点については詳しく説明しませんが、主なことはサーバーへのリクエストの数を減らすことです。

このライブラリはNugetパッケージとして利用できます。

次の2つのオプションがあります。

ASP.NET MVCを使用する場合は、「Views / Web.config」ファイルに変更を加える必要があります。

「system.web.webPages.razor」セクションで、「pages」セクションの「pageBaseType」属性を「SquishIt.Contrib.Mvc.SquishItBasePage」に変更します。

<system.web.webPages.razor> <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <pages pageBaseType="SquishIt.Contrib.Mvc.SquishItBasePage"> <namespaces> <add namespace="System.Web.Mvc" /> <add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Routing" /> </namespaces> </pages> </system.web.webPages.razor>

そして今、実際に~~象とハエ~~ cssおよびjsファイルを組み合わせることができます。

 @{ SquishIt.Css.Add("~/Content/Site.css"); SquishIt.Css.Add("~/Content/themes/base/jquery-ui.css"); SquishIt.Css.Add("~/Content/reset.css"); SquishIt.JavaScript.Add("~/Scripts/jquery-1.4.4.js"); SquishIt.JavaScript.Add("~/Scripts/MicrosoftAjax.debug.js"); } <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> @SquishIt.Css.Render("~/Content/combined_#.css") @SquishIt.JavaScript.Render("~/Scripts/combined_#.js") </head>

また、「Web.config」でデバッグをfalseに変更します

  <compilation debug="false" targetFramework="4.0">

できたその結果、次の結果が得られます。

 <head> <title>Home Page</title> <link rel="stylesheet" type="text/css" href="/Content/combined.css?r=531A7BFA4E917B223909817F07467EDB" /> <script type="text/javascript" src="/Scripts/combined.js?r=6DB45040EF233910B7E1F986316FF2FE"></script> </head>

「_＃」は、コンテンツのハッシュがファイル名に追加されることを意味し、指定されていない場合は要求パラメーターとして追加されることに注意してください。これにより、少なくとも1つのファイルが変更された場合のキャッシュの問題を回避できます。

WebFormsを使用してコーディングする場合、次のようになります。

 <%@ Import Namespace="SquishIt.Framework" %> <%= Bundle.JavaScript() .Add("~/Scripts/jquery-1.4.2.js") .Add("~/Scripts/jquery-ui-1.8.1.js") .Render("~/Scripts/combined_#.js") %>

その結果、10分以内にSquishItライブラリを使用してWebサイトの読み込みを大幅に高速化できます。

GitHubリンク

ASP.NET WebアプリケーションでのCSSファイルとJSファイルの結合と圧縮

More articles: