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

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,349
    Đã được thích:
    1,052
    Đ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ả

    danh sách diễn đàn rao vặt gov chất lượng


Like và Share ủng hộ ITSEOVN