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

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.



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é.