Xem mã nguồn của Minification (lập trình)

Trong [[lập trình]], '''minification''' (còn được gọi là '''minimisation''' hoặc '''minimization''') là quá trình loại bỏ các ký tự không cần thiết từ [[mã nguồn]] hoặc [[Trình thông dịch|chương trình thông dịch]] hoặc [[ngôn ngữ đánh dấu]] mà không thay đổi chức năng của nó. Các ký tự không cần thiết thường là [[Khoảng trắng (khoa học máy tính)|ký tự khoảng trắng]], [[Xuống dòng|dấu xuống dòng]], [[Comment (lập trình máy tính)|comment]], và đôi khi là cả [[Ngôn ngữ lập trình sử dụng dấu ngoặc nhọn|dấu phân cách khối]], thường được sử dụng để tăng thêm khả năng đọc cho mã nguồn, không có tác dụng để chạy. Minification giảm kích thước của mã nguồn, khiến cho việc truyền tải nó qua một mạng lưới (ví dụ như Internet) trở nên hiệu quả hơn. Trong văn hóa lập trình, việc hướng tới mã nguồn được tối giản hết mức là mục tiêu của các cuộc thi [[code golf]].

Minification khác với [[nén dữ liệu]] ở chỗ mã nguồn được thu gọn có thể được diễn giải ngay lập tức mà không cần bước giải nén: cùng một trình thông dịch có thể làm việc với cả mã nguồn gốc cũng như với mã nguồn được thu gọn.

Mục tiêu của minification không giống với [[Obfuscation (lập trình)|obfuscation]]; mã nguồn minified có thể trở về mã nguồn ban đầu bằng các công cụ làm đẹp mã nguồn ([[pretty-printer]]){{cần chú thích}} hoặc các công cụ unminifer. Tuy nhiên, để đạt được mục tiêu, minification đôi khi vẫn sử dụng các kỹ thuật cũng được sử dụng bởi kỹ thuật obfuscation; ví dụ như việc rút ngắn tên [[Biến (khoa học máy tính)|biến]] và tái cấu trúc [[mã nguồn]]. Các công cụ làm đẹp mã hoặc unminifier chỉ có thể đảo ngược hoàn toàn quá trình thu gọn nếu chúng được cung cấp thông tin chi tiết về các chuyển đổi do chính các kỹ thuật đó thực hiện. Khi thiếu thông tin về các thao tác thu gọn, mã nguồn được đảo ngược sẽ sử dụng tên biến và [[luồng điều khiển]] khác, nhưng vẫn giữ nguyên chức năng như mã nguồn ban đầu.

== Ví dụ ==
Ví dụ, ở đoạn mã [[JavaScript]] sau:
<syntaxhighlight lang="javascript">
// Đây là một comment sẽ bị loại bỏ bởi minifier
var array = [];
for (var i = 0; i < 20; i++) {
  array[i] = i;
}
</syntaxhighlight>
tương đương với, nhưng dài hơn đoạn mã sau:
<syntaxhighlight lang="javascript">
for(var a=[],i=0;i<20;a[i]=i++);
</syntaxhighlight>

== Lịch sử ==
Năm 2001, [[Douglas Crockford]] đã giới thiệu JSMin,<ref>{{Chú thích web |tiêu đề=JSMin: The JavaScript Minifier |url=https://www.crockford.com/javascript/jsmin.html |website=Crockford.com |date=11 tháng 9 năm 2001 |first=Douglas |last=Crockford |publisher=[[WP:TUXUATBAN|Tự xuất bản]]|archive-url=https://web.archive.org/web/20020405140416/https://www.crockford.com/javascript/jsmin.html |archive-date=5 tháng 4 năm 2002 }}</ref> một công cụ giúp loại bỏ comment và các dấu khoảng trắng khỏi đoạn mã [[JavaScript]].<ref name=":1">{{Chú thích web |url = https://webplatform.github.io/docs/concepts/programming/javascript/minification/ |title = Code minification |website = webplatform.github.io |publisher=The WebPlatform Project |url-status = live |archive-url = https://web.archive.org/web/20160424125048/https://docs.webplatform.org/wiki/concepts/programming/javascript/minification |archive-date = 24 tháng 4 năm 2016}}</ref> Sau đó là YUI Compressor ra đời vào năm 2007.<ref name=":1"/> Vào năm 2009, Google đã ra mắt bộ công cụ Closure, trong đó có Closure Compiler với tính năng source mapping nguồn cùng với một tiện ích mở rộng [[Firefox]] có tên Closure Inspector.<ref>{{Chú thích web |url=https://arstechnica.com/information-technology/2009/11/google-opens-up-its-javascript-development-toolbox-to-all/ |title=Google opens up its JavaScript development toolbox to all |website=[[Ars Technica]] |first=Ryan |last=Paul |date=6 tháng 11 năm 2009}}</ref> Năm 2010, Mihai Bazon giới thiệu UglifyJS<!--Q116250477-->, nhưng sau đó được thay thế bởi UglifyJS2 vào năm 2012, với khả năng hỗ trợ source mapping.<ref>{{Chú thích web |url=http://lisperator.net/blog/should-you-switch-to-uglifyjs2/ |title=Should you switch to UglifyJS2? |last=Bazon |first=Mihai |website=lisperator.net |date=8 tháng 11 năm 2012 |publisher=[[WP:TUXUATBAN|Tự xuất bản]]}}</ref> Từ năm 2017, Alex Lam đã tiếp quản việc bảo trì và phát triển UglifyJS2, thay thế nó bằng UglifyJS3, một phiên bản thống nhất giữa [[CLI]] với [[API]].<ref>{{Chú thích web |url=https://www.npmjs.com/package/uglify-js/v/3.0.0 |title=uglify-js NPM  |website=npmjs.com |date=6 tháng 5 năm 2017 }}</ref> Vào năm 2018, Terser<!--Q95961419--> được fork và được phát triển từ UglifyJS<ref>{{Chú thích web |title=terser · JavaScript mangler and compressor toolkit for ES6+ |url=https://terser.org/ |access-date=2023-01-29 |website=terser.org}}</ref><ref>https://github.com//terser/commit/3ef6879ecafd12b57e575ec85e6104e71d5a1b6f {{dead link|date=tháng 1 năm 2024}}</ref> và đã được ưa chuộng nhiều. Năm 2020, Terser đã vượt xa UglifyJS về số lượt tải hàng ngày.<ref>{{Chú thích web | url=https://npmtrends.com/terser-vs-uglify-js | title=Terser vs uglify-js |website= NPM trends |url-status=live |archive-url=https://archive.today/20240127214344/https://npmtrends.com/terser-vs-uglify-js |archive-date= 27 tháng 1 năm 2024}}</ref>

== Source mapping ==
Source map là một [[định dạng tập tin]] cho phép các công cụ phần mềm [[JavaScript]] hiển thị cho người dùng đoạn mã khác với mã nguồn thực sự được máy tính thực thi. Ví dụ, việc "ánh xạ" mã nguồn đã được minified với mã nguồn ban đầu để hỗ trợ cho việc [[gỡ lỗi]].

Định dạng ban đầu được tạo bởi Joseph Schorr như một phần của dự án Closure Inspector minification.<ref name=":0">{{Chú thích web|date=2011-01-11|title=Source Map Revision 3 Proposal|url=https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit|url-status=dead|archive-url=https://web.archive.org/web/20160308081352/https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit|archive-date=2016-03-08|access-date=2016-04-16}}</ref> Phiên bản 2 và 3 của định dạng đã giảm đáng kể kích thước của tập tin "ánh xạ".<ref name=":0" />

==Dạng==

===Công cụ===
[[Visual Studio Code]] đi kèm với khả năng hỗ trợ minification trong nhiều ngôn ngữ. Điều này có thể được thực hiện bằng cách đi tới Visual Studio Marketplace để tải xuống và cài đặt một số minifter.

Công cụ tối ưu hóa JavaScript có thể minify và tạo ra source map. Ngoài ra một số công cụ trực tuyến nhất định có thể nén [[CSS]].{{cần chú thích}}

===Phát triển web===
Các thành phần và thư viện dành cho các [[ứng dụng web]] và [[trang web]] đã được phát triển để tối ưu hóa các yêu cầu [[tập tin]] và giảm thời gian tải trang bằng cách thu nhỏ kích thước của nhiều tập tin khác nhau.

Tài nguyên [[JavaScript]] và [[CSS]] có thể được minified, vẫn giữ nguyên chức năng trong khi giảm đáng kể kích thước tập tin. Các thư viện trực tuyến có khả năng minify và tối ưu hóa ở các mức độ khác nhau. Một số thư viện cũng kết hợp nhiều tập lệnh thành một tập tin duy nhất để tải xuống từ phía client. Source map JavaScript có thể giúp mã nguồn dễ đọc và gỡ lỗi ngay cả sau khi đã được kết hợp và minified.<ref>{{Chú thích web |last=Seddon |first=Ryan |date=March 21, 2012 |title=Introduction to JavaScript Source Maps |url=http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ |url-status=dead |archive-url=https://web.archive.org/web/20211228111603/http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ |archive-date=Dec 28, 2021 |website=HTML5 Rocks}}</ref>

== Tham khảo ==
{{tham khảo}}

[[Thể loại:JavaScript]]
[[Thể loại:Mã nguồn]]