我們也可以在Asp.Net WebForm項目中去使用Optimization,去處理我們的資源文件,從而起到優化網站性能的效果,前端知識得從小事做起。但是在使用過程中我卻發現了下面的問題。
第一步:新建一個Asp.Net WebForm項目 ,然后 通過NuGet添加Microsoft ASP.NET Web Optimization Framework的引用
第二步:在App_Code中添加BundleConfig.cs
using System.Web.Optimization; public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/bundles/news.css") .Include("~/common/a.css", "~/common/b.css")); bundles.Add(new ScriptBundle("~/bundles/news.js") .Include("~/script/a.js", "~/script/b.js", "~/script/c.js")); } }
第三部: 在Global.asax的Application_Start中添加如下代碼:
System.Web.Optimization.BundleTable.EnableOptimizations = true;//是否開啟合並 BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);
第四步:在.aspx中添加如下的 js/css 引用代碼
<head> <title>測試</title> <%: System.Web.Optimization.Styles.Render("~/bundles/news.css") %> <%: System.Web.Optimization.Scripts.Render("~/bundles/news.js") %> </head>
第五步:查看運行結果:
於是我好奇的看了看“/bundles/new.css?v=kmhQVjhQvjknAFAwxWSfOW5ueVMUIDDpyCtaw5lHjBY1”,好家伙里面報錯了,說找不到路徑,錯誤如圖:
於是我朝着路徑錯誤的方向試了試,改改路徑。把“第二步”中的路徑都改成了這樣:
public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { //bundles.Add(new StyleBundle("~/bundles/news.css") // .Include("~/common/a.css", // "~/common/b.css")); //bundles.Add(new ScriptBundle("~/bundles/news.js") // .Include("~/script/a.js", // "~/script/b.js", // "~/script/c.js")); bundles.Add(new StyleBundle("~/css") .Include("~/common/a.css", "~/common/b.css")); bundles.Add(new ScriptBundle("~/bundlesJs") .Include("~/script/a.js", "~/script/b.js", "~/script/c.js")); } }
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <%: System.Web.Optimization.Styles.Render("~/css") %> <%: System.Web.Optimization.Scripts.Render("~/bundlesJs") %> </head>
於是就解決了這個奇怪的問題,好像這個在MVC中是不一樣的。
效果如圖:
不知道其他"小伙伴"有沒有遇到過類似的問題!