Sử dụng Bundling và Minification trong Web Forms để tối ưu thời gian tải trang

Bundling và Minification là hai công nghệ được sử dụng trong Asp.Net 4.5 để cải thiện và tối ưu thời gian tải trang của bạn. Bundling và Minification tối ưu thời gian tải bằng cách nhóm các file css & js lại với nhau (Bundling) , và tiến hành loại bỏ các khoảng trống, xuống dòng, comment để giảm kích thước file (Minification)

Hầu hết các browsers hiện tại giới hạn tối đa 6 resquest đồng thời với mỗi hostname. Điều đó có nghĩa là trong khi có 6 request đang được xử lý thì các sẽ được đưa vào hàng đợt, chính điều này gây ảnh hưởng tới perfomancer của hệ thống khi ma đa số các web developer chúng ta sử dụng khá nhiều thư viện js & css trong project

Với các bạn đã làm Asp.Net MVC thì sẽ thấy quan thuộc với ASP.NET Bundles này rồi, trong bài này mình tập trung nói về cách sử dụng ASP.NET Bundles trong Web Forms

Đầu tiên, chúng ta cần tạo 1 ứng dụng web (chú ý targets the .Net 4.5 framework)

Với những project trước đây của các bạn (sử dụng Asp.Net 4.5) mà khi tạo ở dạng Empty Project thì các bạn cần chạy dòng lệnh này ở Nuget Package Manage. Mình cũng thường tạo các empty project sau đó dùng cái gì sẽ install vào, cảm giác nó đỡ thừa hơn :)

Install-Package Microsoft.AspNet.Web.Optimization

Sau khi tạo xong project, chúng ta tạo 2 class App_Start/BundleConfig.cs và Global.asax

 

App_Start/BundleConfig.cs

using System.Web.Optimization;

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

            bundles.Add(new StyleBundle("~/Content/style").Include(
                "~/Content/bootstrap.css",
                "~/Content/mystyle.css"
                ));
        }
    }
}

 

Global.asax

protected void Application_Start(object sender, EventArgs e)
        {
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            BundleTable.EnableOptimizations = true;
        }

 

WebConfig

<!--  Inside system.web -->
<pages>
      <namespaces>
        <add namespace="System.Web.Optimization"/>
      </namespaces>
    </pages>

 

WebForm1.aspx

<head runat="server">
    <asp:PlaceHolder runat="server">
        <%: Styles.Render("~/Content/style") %>
    </asp:PlaceHolder>
</head>
<body>
    <%: Scripts.Render("~/bundles/javascript") %>
</body>

 

Kiểm soát việc Bundling & Minification

- Bạn có thể thể Disable hoặc Enable tính năng này bằng cách thay đổi giá trị thiết lập trong Application_Start

BundleTable.EnableOptimizations = true;// true or false

- Hoặc có thể thiết lập trực tiếp trong webconfig bằng cách

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

Các bạn có thể tham khảo chi tiết hơn ở link dưới đây

https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

Related Post


Sử dụng Log4Net để ghi log trong Asp.Net
Monday, February 13, 2017
Log4Net là một thư viện mã nguồn mở, nó được thiết kế một cách linh hoạt với nhiều cách ghi log và định dạng log khác nhau. Bên cạnh đó sử dụng Log4Net cũng không ảnh hưởng đáng kể đến performance của hệ thống, hỗ trợ rất đắc lực cho chúng ta trong những trường hợp ghi log lỗi hệ thống, giúp nhanh chóng tìm ra lỗi để đưa ra cách khắc phục .
Sử dụng google reCAPTCHA trong Asp.Net
Thursday, February 9, 2017
Đã lâu lắm rồi mới có thời gian ngồi viết lại blog, hôm nay mình chia sẻ cách sử dụng Google reCAPTCHA trong các project Asp.Net. Google reCAPTCHA là 1 dạng captcha mới và tiện dụng để chống spam, chống bot tự động đăng ký điền form và thực hiện trên form. Phiên bản mới của google recaptcha rất thân thiện với người dùng và độ bảo mật cao.
Search

Category

Blog Archive

Đăng ký nhận bài mới

Facebook Page