Minifier/Minify CSS, JS trong MVC bằng BuildBundlerMinifier hiệu quả

Thảo luận trong 'Lập Trình Website MVC5 & MVC6' bắt đầu bởi admin, 1/10/20.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,883
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Việc tự động auto xử lý nén Minifier/Minify CSS, JS trong MVC asp.net vô cùng đơn giản với BuildBundlerMinifier với vài thao tác có thể sử dụng và điều khiển một cách dễ dàng giúp tăng điểm PageSpeed Insights trong google cực kỳ hiệu quả, bạn chỉ cài và cấu hình 1 lần, mỗi lần build code sẽ được minify rất nhanh gọn không hề phức tạp.

    Mặc định file CSS, JS của bạn sẽ xuống dòng như code sau (tương tự với js):
    Mã:
    .div-abc
    {
       color: red;
    }
    BuildBundlerMinifier sẽ giúp bạn nén Minifier gọn lại tối ưu (tương tự với js)
    Mã:
    .div-abc{color:red}
    Bước 1: Để tự động xử lý Minifier css, js việc đầu tiên bạn cài nuget ở link sau: https://www.nuget.org/packages/BuildBundlerMinifier/ hoặc truy cập Tools-> Nuget package manager -> Manager nuget package for solution... để cài nhé.

    Bước 2: Sau khi cài xong. Bạn vào solution của bạn tạo 1 file có tên bundleconfig.json giống hình dưới để cấu hình.

    bundleconfig.json.jpg

    Bước 3: cấu hình file bundleconfig.json.
    • Cấu hình như dưới, bạn thay thế các lớp class css, js thành của bạn
    PHP:
    [
      {
        
    "outputFileName""content/style.min.css",
        
    "inputFiles": [
          
    "content/bootstrap.css",
          
    "fonts/font.css",
          
    "content/style.css",
          
    "content/jquery-ui.min.css"
        
    ]
      },
      {
        
    "outputFileName""scripts/main.min.js",
        
    "inputFiles": [
          
    "scripts/bootstrap.min.js",
          
    "scripts/main.js",
          
    "scripts/jquery.sticky.js",
          
    "scripts/respond.js",
          
    "scripts/session-timeout.js"
        
    ],
        
    "sourceMap"false
      
    }
    ]
    Bước 4: gọi ra ngoài view hoặc Layout
    Chỉ cần gọi đúng tên filename ra là được ngay
    Mã:
    <link rel="stylesheet" href="content/style.min.css" />
    <script src="/scripts/main.min.js"></script>
    
    Như vậy mỗi lần bạn sửa file css hay js chính, chỉ cần Build Solution là file sẽ tự động được sinh ra, hoặc bạn chỉ cần publish là file cũng sẽ tự động được sinh ra nhé.

    build-solution.jpg
     
    Cảm ơn đã xem bài:

    Minifier/Minify CSS, JS trong MVC bằng BuildBundlerMinifier hiệu quả



Chủ để tương tự : Minifier/Minify trong
Diễn đàn Tiêu đề Date
Lập Trình Website MVC5 & MVC6 Minifier/Minify HTML Output trong MVC với WebMarkupMin.Core 1/10/20
Lập Trình Website MVC5 & MVC6 Clear cache in Linq, xóa Cache lưu trong Linq asp.net MVC 1/7/22
Lập Trình Website MVC5 & MVC6 Thông báo khi có đơn hàng mới vào Telegramtrong trong asp.net MVC 29/3/21
Lập Trình Website MVC5 & MVC6 Minify HTML, CSS, JS trong MVC với ZetaProducerHtmlCompressor 1/10/20
Lập Trình Website MVC5 & MVC6 Regex.Replace không phân biệt chữ hoa thường trong c# 19/4/20