Mục đích để giảm bớt dung lƣợng các tài nguyên loại bỏ các bytes không cần thiết, chẳng hạn nhƣ khoảng trắng, xuống dòng, thụt đầu dòng, mã chú thích, các biến trùng lặp…
Lợi ích của kỹ thuật này là khi thu nhỏ HTML, CSS, JavaScript sẽ làm giảm đáng kể tốc độ tải tài nguyên, giúp trình duyệt phân tích cú pháp và hiển thị nội dung nhanh hơn.
Ví dụ về thu nhỏ HTML
var input = '<!-- some comment --><p>blah</p>';
18 output; '<p>blah</p>'
Thu nhỏ JavaScript Giúp biên dịch từ mã JavaScript tới mã JavaScript tốt hơn nhƣ giúp trình duyệt phân tích và thực thi mã nhanh hơn, phân tích phát hiện các mã tồi, loại bỏ và viết lại những dòng mã gây lỗi, kiểm tra cú pháp…
Hình 2.8 Công cụ minify
Ví dụ trên cho thấy đã giảm đƣợc dung lƣợng mã từ 92 bytes còn 55 bytes bằng cách removing chú thích, khoảng trắng và thay thế những biểu tƣợng cơ bản.
Thu nhỏ CSS: Loại bỏ chú thích, khoảng trắng, mã thừa, tối ƣu mã css Mã trƣớc khi thu nhỏ H1 { Padding-left:1px; Padding-right:1px; Padding-top:1px; Padding-bottom:1px; Color:#1111 } H2{ Padding-left:1px; Padding-right:1px; Padding-top:1px;
19 Padding-bottom:1px;
Color:#1111 }
Mã sau khi thu nhỏ
H1,h2{padding:1px;color:#1111}
Kết quả sau khi thu nhỏ dung lƣợng rất nhỏ dòng mã rất ngắn giúp trình duyệt phân tích cú pháp và hiển thị nội dung rất nhanh [11].
Điểm hạn chế duy nhất của kỹ thuật này là làm đoạn mã khó đọc cho các lập trình viên tuy nhiên cách khắc phục khá đơn giản là lƣu ra hai phiên bản phát triển và phiên bản phát hành. Phiên bản phát triển sẽ giữ nguyên mã ban đầu, phiên bản phát hành là phiên bản đã đƣợc Minify.