Thêm khung công tác Tối ưu hóa Web ASP.NET mới vào các dự án MVC4 sau khi nâng cấp thủ công chúng

Question

Sau khi nâng cấp một cách thủ công dự án ASP.NET MVC lên MVC4 using these instructions, làm thế nào để bạn thiết lập tính năng gộp và ghép nội dung CSS và JavaScript mới của ASP.NET Tối ưu hóa Web Framework trong MVC4? Các mẫu mặc định có tất cả các thiết lập này, nhưng làm thế nào để bạn làm điều đó bằng tay?

Answer 1

• Nhấp chuột phải tham khảo sau đó Manage NuGet Packages và thêm “Microsoft.AspNet.Web.Optimization” (hoặc gõ Install-Package Microsoft.AspNet.Web.Optimization vào NuGet console).
• Trong tệp Web.config của bạn, thêm thông tin sau vào <system.webServer>, cho phép các gói được rút gọn được phân phát bằng URL không mở rộng.

<handlers> 
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" /> 
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" /> 
<remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
<add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" /> 
<add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" /> 
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
</handlers> 

• Trong thư mục App_Start của bạn, thêm một lớp mới gọi là BundleConfig.cs. Nó sẽ giống như thế này:

using System.Web; 
using System.Web.Optimization; 

namespace MvcApplication1 
{ 
    public class BundleConfig 
    { 
     // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 
     public static void RegisterBundles(BundleCollection bundles) 
     { 
      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
       "~/Scripts/jquery-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
       "~/Scripts/jquery-ui-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
       "~/Scripts/jquery.unobtrusive*", 
       "~/Scripts/jquery.validate*")); 

      // Use the development version of Modernizr to develop with and learn from. Then, when you're 
      // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
         "~/Scripts/modernizr-*")); 

      bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); 

      bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
         "~/Content/themes/base/jquery.ui.core.css")); 
     } 
    } 
} 

• Chỉnh sửa ở trên để thêm đoạn mã và kiểu bó bạn yêu cầu sau đó thêm các dòng sau vào sử dụng phần và Application_Start trong Global.asax.cs:

//using section 
using System.Web.Optimization; 

//Application_Start 
BundleConfig.RegisterBundles(BundleTable.Bundles); 

• Thay CSS và JavaScript và thẻ trong _Layout.cshtml với các cuộc gọi đến và @Styles.Render("~/Content/css")@Scripts.Render("~/bundles/jquery"), replaci ng các thông số với tên của các gói bạn đã thêm vào BundleConfig.cs. Đảm bảo không đặt tên bất kỳ gói nào giống như các thư mục trong dự án của bạn.

Bây giờ bạn có tất cả các thiết lập - tìm hiểu về cách sử dụng đầy đủ các featureset đây: http://www.asp.net/mvc/overview/performance/bundling-and-minification

Answer 2

Có Thực hiện theo các bước dưới đây để bó và giảm bớt JS và CSS:

• mở đầu tiên quản lý gói và chạy lệnh, chọn ứng dụng web của bạn làm dự án.

Install-Package Microsoft.AspNet.Web.Optimization

• Đến global.asax click chuột phải và chế độ code

• Dán mã dưới đây:

  public static void MinifyJavaScriptAndCSS() 
  { 
      var scripts1 = new ScriptBundle("~/bundles/customJSBundle"); 
      scripts1.Include("~/Scripts/script1.js"); 
      scripts1.Include("~/Scripts/script2.js"); 
      BundleTable.Bundles.Add(scripts1); 
  
      //Bundle Css 
      var css1 = new StyleBundle("~/bundles/customCSSBundle"); 
      css1.Include("~/Styles/style1.css"); 
      css1.Include("~/Styles/style2.css"); 
      BundleTable.Bundles.Add(css1); 
  } 
  

• Gọi điện thoại này trong Application_Start()

  protected void Application_Start() 
  { 
      ApplicationHelper.MinifyJavaScript(); 
  } 
  

• Đến _Layout.cshtml trong Views/Shared

• Thêm dòng trong đầu

  @ ViewBag.Title - My ASP.NET Application @Styles.Render ("~/bó/customCSSBundle")

• Thêm điều này trước khi đóng cửa của thẻ nội dung

  //your code 
      @Scripts.Render("~/bundles/customJSBundle") 
  </body> 
  

• Trong web.config nếu bạn thiết lập debug = true, các file sẽ không được đóng gói. Nếu bạn đặt nó là false, thì các tệp sẽ được nhóm lại.