ASP.NET - MVC - JscriptBundle

ScriptBundle trong ASP.NET MVC

Chúng tôi đã học được cách hoạt động của kỹ thuật đóng gói trong ASP.NET MVC. Ở đây, chúng ta sẽ tìm hiểu cách tạo một gói nhiều tập tin JavaScript trong một yêu cầu http.

ASP.NET MVC API chứa các lớp ScriptBundle tối ưu và đóng gói JavaScript.

Mở tập tin App_Start \ BundleConfig.cs trong các thư mục MVC. Tập tin BundleConfig.cs được tạo mặc định bởi framework MVC. Bạn nên viết tất cả mã đóng gói của mình trong phương thức BundleConfig.RegisterBundles (). (bạn có thể tạo lớp tùy chỉnh của riêng mình thay vì sử dụng lớp BundleConfig, nhưng nên tuân theo tiêu chuẩn.) Đoạn mã sau đây cho thấy một phần của phương thức RegisterBundles.

Ví dụ: BundleConfig.RegisterBundle()

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

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {   
        // create an object of ScriptBundle and 
        // specify bundle name (as virtual path) as constructor parameter 
        ScriptBundle scriptBndl = new ScriptBundle("~/bundles/bootstrap");

        
        //use Include() method to add all the script files with their paths 
        scriptBndl.Include(
                            "~/Scripts/bootstrap.js",
                            "~/Scripts/respond.js"
                          );

        
        //Add the bundle into BundleCollection
        bundles.Add(scriptBndl);

        BundleTable.EnableOptimizations = true;
    }
}

Trong ví dụ trên, chúng ta đã tạo ra một gói gồm hai tệp JavaScript, bootstrap.js và respons.js bằng ScriptBundle

  1. Trước hết, tạo một thể hiện của lớp ScriptBundle bằng cách chỉ định tên gói làm tham số hàm tạo. Tên gói này là một đường dẫn ảo bắt đầu bằng ~ /. Bạn có thể đưa ra bất cứ điều gì trong đường dẫn ảo nhưng bạn nên đưa ra một đường dẫn sẽ dễ dàng xác định là một gói. Ở đây, chúng tôi đã đưa ra đường dẫn "~ / bundles / bootstrap", để chúng ta có thể dễ dàng xác định rằng gói này bao gồm các tập tin liên quan đến bootstrap.
  2. Sử dụng phương thức Include để thêm một hoặc nhiều tập tin JS vào một gói với đường dẫn tương đối của nó sau đường dẫn gốc bằng dấu ~.
  3. Cuối cùng, thêm gói vào đối tượng BundleCollection, được chỉ định làm tham số trong phương thức RegisterBundle ().
  4. Last, BundleTable.EnableOptimizations = true cho phép đóng gói và thu nhỏ trong chế độ gỡ lỗi. Nếu bạn đặt nó thành false thì nó sẽ không thực hiện gói và thu nhỏ.

Bạn cũng có thể sử dụng phương thức IncludeDirectory của lớp Bundle để thêm các tập tin vào một thư mục.

Ví dụ ScriptBundle:

public static void RegisterBundles(BundleCollection bundles)
{            
    bundles.Add(new ScriptBundle("~/bundles/scripts").IncludeDirectory("~/Scripts/","*.js",true));
}

Do đó, bạn có thể tạo một gói tệp JavaScript bằng ScriptBundle. MVC gọi phương thức BundleConfig.RegisterBundle () từ sự kiện Application_Start trong tập tin Global.asax.cs, để nó có thể thêm tất cả các gói vào BundleCollection khi bắt đầu ứng dụng.

Ví dụ: Gọi RegisterBundle() trong sự kiện Application_Start 

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }
}

Sử dụng Wildcards

Đôi khi các tập tin tập lệnh của bên thứ ba bao gồm các phiên bản trong tên của tập tin tập lệnh. Vì vậy, không nên thay đổi mã bất cứ khi nào bạn nâng cấp phiên bản tập tin tập lệnh. Với việc sử dụng ký tự đại diện, bạn không phải chỉ định phiên bản của tập tin tập lệnh. Nó tự động bao gồm các tập tin với phiên bản có sẵn.

Ví dụ: các tập tin Jquery có nhiều phiên bản trong một tên. Vì vậy, bạn có thể sử dụng ký tự đại diện {phiên bản} để chọn phiên bản dựa trên phiên bản có sẵn.

Example: Wildcard with bundle

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {            
        bundles.Add(new ScriptBundle("~/bundles/jquery")
               .Include( "~/Scripts/jquery-{version}.js"));
    }
}

Bây giờ, nó sẽ chọn tập tin jquery được thêm vào trong project. Nếu bạn có jquery-1.7.1.js thì nó sẽ lấy tập tin này và khi bạn nâng cấp tập tin jquery lên jquery-1.10.2.js thì nó sẽ tự động kết xuất tệp phiên bản 1.10 mà không cần thay đổi hoặc biên dịch mã.

Sử dụng CDN

Bạn cũng có thể sử dụng Mạng phân phối nội dung để tải các tập tin. Ví dụ: bạn có thể tải thư viện jquery từ CDN như bên dưới.

Ví dụ: Load files từ CDN

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {            
        var cdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

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

Trong đoạn mã trên, jquery sẽ được yêu cầu từ CDN

Bây giờ, hãy xem cách sử dụng bundle vào razor.

Đưa ScriptBundle vào Razor 

Chúng ta đã tạo ra một gói script ở trên. Bây giờ, chúng ta sẽ tìm hiểu làm thế nào để đưa bundle vào razor.

Script bundles có thể chứa lớp tĩnh Scripts . Sử dụng phương thức Scripts.Render() .

Ví dụ: Scripts.Render()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Scripts.Render("~/bundles/bootstrap")
</head>
<body>
    @*html code removed for clarity *@
</body>
</html>

Bây giờ, nếu bạn chạy ví dụ trên thì bạn sẽ thấy hai tập tin script được kết hợp, thu nhỏ và tải trong một yêu cầu. Phải đảm bảo rằng bạn đã đặt debug = false trong web.config <compilation debug = "false" targetFramework = "4.5" />

Load Bundle in Browser

Như bạn có thể thấy trong hình trên, gói bootstrap được tải trong một yêu cầu. Nó cũng đã kết hợp và thu nhỏ hai tệp JS cho bootstrap.

 Những điểm cần nhớ :

  1. Bundling and Minification giảm thiểu thời gian tải tập tin tĩnh hoặc tập tin css sau đó giảm thiểu thời gian tải trang.
  2. ScriptBundle thu nhỏ các tập tin JavaScript.
  3. Tạo các gói script hoặc css trong lớp BundleConfig có trong thư mục App_Start.
  4. Sử dụng ký tự đại diện {version} để hiển thị các tệp phiên bản có sẵn khi chạy.
  5. Sử dụng phương thức Scripts.Render("bundle name") để chứa các script được đóng gói trong razor.