Minification — nó là gì, nguyên tắc minification và công cụ cho mã

Minification là gì?

Minification là quá trình tự động chuyển đổi mã nguồn, loại bỏ tất cả các ký tự không ảnh hưởng đến việc thực thi chương trình. Dấu cách, tab, ký tự xuống dòng, chú thích và dấu ngoặc đơn dư thừa được loại bỏ hoặc rút gọn. Minification được áp dụng cho JavaScript, CSS, HTML và ít thường xuyên hơn là cấu hình JSON trước khi triển khai lên môi trường sản xuất.

Mục tiêu chính của minification là giảm kích thước tệp truyền qua mạng. Một tệp JavaScript 300 KB sau khi minification có thể chiếm 120–150 KB, giảm thời gian tải 200–400 ms trên kết nối 3G chậm. Google PageSpeed Insights và Lighthouse trực tiếp khuyến nghị minify mã: đây là một trong những tiêu chí đánh giá hiệu suất và Core Web Vitals.

Minification là một phần không thể thiếu của quy trình build. Sau khi được transpile bằng TypeScript hoặc Babel, mã đi qua Tree Shaking (loại bỏ hàm không dùng), sau đó qua minifier, và chỉ sau đó được tập hợp vào bundle cuối cùng. Trong các bundler hiện đại (Webpack, Rollup, esbuild), minification được thực hiện bởi plugin ở giai đoạn cuối của quá trình build.

Những gì minification loại bỏ

Cách minification hoạt động: các kỹ thuật chính

Loại bỏ dấu cách và ngắt dòng là kỹ thuật đơn giản và rõ ràng nhất. Trình phân tích của minifier duyệt qua AST (Cây cú pháp trừu tượng) và loại bỏ tất cả các ký tự khoảng trắng không phải là một phần của chuỗi ký tự. Hầu hết các minifier còn kết hợp các toán tử thành một dòng duy nhất, mang lại tiết kiệm bổ sung khi nén bằng GZip hoặc Brotli.

Thay thế tên biến (mangling) là kỹ thuật mạnh mẽ hơn. Các biến cục bộ và tham số hàm được đổi tên thành định danh một chữ cái: a, b, c. Điều này giảm kích thước thêm 15–30%. Terser và esbuild hỗ trợ mangling với tùy chọn giữ nguyên một số tên (ví dụ: API công khai qua mangle.props.reserved).

Loại bỏ mã chết

Dead code elimination (DCE) loại bỏ các nhánh mã không bao giờ được thực thi. Minifier phân tích các điều kiện luôn sai (if (false)) và loại bỏ các khối tương ứng. Phân tích nâng cao hơn được thực hiện ở giai đoạn Tree Shaking trước khi minification, nhưng DCE ở cấp độ minifier sẽ bắt các trường hợp cục bộ của mã chết không được phát hiện ở cấp độ module.

Mangling tên biến

Mangling đổi tên các biến cục bộ và tham số hàm thành định danh ngắn (một hoặc hai chữ cái). Terser thực hiện mangling dựa trên phạm vi: các biến trong cùng một hàm nhận được tên ngắn duy nhất không xung đột với phạm vi bên ngoài. Tùy chọn mangle.reserved cho phép giữ nguyên một số tên — ví dụ: API công khai của thư viện.

Mangling không ảnh hưởng đến biến toàn cục, thuộc tính đối tượng (trừ khi bật mangle.props) hoặc tên lớp được sử dụng với new. Để bảo vệ API công khai của thư viện khỏi mangling, hãy sử dụng mangle.props.reserved với biểu thức chính quy: reserved: ["_prop", /^private_/]. Nếu không có cài đặt này, mangling có thể phá vỡ thư viện nếu mã bên ngoài truy cập thuộc tính đối tượng theo tên.

Ví dụ: trước và sau khi minification

// Mã nguồn
function calculateTotal(price, tax) {
    var result = price + (price * tax);
    // Trả về tổng số tiền
    return result;
}

var total = calculateTotal(100, 0.2);
console.log(total);

// Sau khi minification bằng Terser
function calculateTotal(a, b){return a + a * b}
var c = calculateTotal(100, .2);
console.log(c);

Trong ví dụ thứ hai, Terser đã loại bỏ chú thích, dấu cách và ngắt dòng, đổi tên price thành a, tax thành b, result thành c. Kích thước giảm từ 197 ký tự xuống còn 79 — tiết kiệm 60%. Đồng thời, chức năng của mã được bảo toàn hoàn toàn: calculateTotal(100, 0.2) trả về 120.

Công cụ minification: Terser, esbuild, UglifyJS

Terser là minifier JavaScript tiêu chuẩn trong hệ sinh thái Webpack và hầu hết các bundler hiện đại. Terser hỗ trợ cú pháp ES6+ (hàm mũi tên, async/await, spread), mangling với bảo vệ API công khai, source maps và thực thi song song với số lượng CPU. Kể từ phiên bản 5.16, Terser bao gồm tối ưu hóa TypeScript — loại bỏ import chỉ kiểu và interface.

esbuild là minifier viết bằng Go, được tích hợp trong bundler cùng tên. esbuild thực hiện minification nhanh hơn 10–100 lần so với Terser nhờ mã gốc và xử lý song song. Tuy nhiên, esbuild hỗ trợ ít tối ưu hóa hơn: nó không thực hiện mangling với bảo toàn thuộc tính, không loại bỏ import chỉ kiểu và tối ưu hóa biểu thức ít mạnh mẽ hơn.

Cấu hình Terser trong Webpack

// webpack.config.js — cấu hình TerserPlugin
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
            dead_code: true,
          },
          mangle: {
            reserved: ["React", "Component"],
          },
          output: {
            comments: false,
          },
        },
        parallel: true,
      }),
    ],
  },
};

Cấu hình TerserPlugin bao gồm ba khối chính. compress xử lý tối ưu hóa biểu thức: drop_console loại bỏ console.log, drop_debugger loại bỏ debugger, dead_code loại bỏ các nhánh không thể truy cập. mangle kiểm soát việc đổi tên biến với reserved để bảo vệ tên công khai. parallel bật đa luồng với số lượng CPU.

Minification CSS với esbuild

// esbuild: lệnh CLI để minification JS và CSS
// esbuild app.js --bundle --minify --outfile=dist/app.min.js
// esbuild app.css --bundle --minify --outfile=dist/app.min.css

const esbuild = require("esbuild");

esbuild.build({
  entryPoints: ["src/app.js", "src/styles.css"],
  bundle: true,
  minify: true,
  sourcemap: true,
  target: ["es2015"],
  outdir: "dist",
}).catch(() => process.exit(1));

API esbuild chấp nhận cấu hình một dòng. minify: true bật minification cho cả JS và CSS. sourcemap: true tạo bản đồ mã để gỡ lỗi. target xác định cấp ES tối thiểu — esbuild tự động transpile mã hiện đại cho phiên bản đã chọn. esbuild đặc biệt hiệu quả cho các dự án có thời gian build quan trọng: pipeline CI/CD, Hot Module Replacement và prototype nhanh.

Minification trong React Native và WebView

React Native sử dụng Metro Bundler — bundler riêng bao gồm minification dựa trên Terser. Ở chế độ sản xuất, Metro tự động áp dụng minification cho bundle JavaScript của ứng dụng. Cấu hình minification trong Metro được thiết lập qua metro.config.js trong phần transformer.minifierConfig. Ngoài ra, có thể tắt inline-require để giảm kích thước bundle trên iOS.

WebView trong các ứng dụng di động cũng được hưởng lợi từ minification. HTML, CSS và JS được tải trong WebView cần được minify trước khi nhúng vào ứng dụng hoặc tải từ máy chủ. Đối với tài nguyên cục bộ (Assets), minification đặc biệt quan trọng — kích thước APK/IPA ảnh hưởng trực tiếp đến tỷ lệ chuyển đổi cài đặt trong các cửa hàng ứng dụng.

Hermes và minification

Hermes là công cụ JavaScript cho React Native do Facebook phát triển. Hermes thực hiện biên dịch Ahead-of-Time (AOT) bytecode, giảm thời gian khởi động ứng dụng 30–50%. Đối với Hermes, minification bundle JavaScript được thực hiện trước khi biên dịch bytecode bằng Terser. Hermes hỗ trợ định dạng HBC (Hermes Bytecode) riêng, nhưng giai đoạn minification JS vẫn cần thiết.

Cấu hình Metro cho React Native

// metro.config.js — cấu hình minification
const defaultConfig = require("metro-config/src/defaults");

module.exports = require("metro-config").mergeConfig(
  defaultConfig,
  {
    transformer: {
      minifierConfig: {
        compress: {
          drop_console: true,
        },
        mangle: {
          safari10: true,
        },
      },
    },
  }
);

Metro với minifierConfig.drop_console loại bỏ tất cả console.log khỏi bundle sản xuất React Native. Tham số mangle.safari10 ngăn việc đổi tên định danh làm hỏng Safari 10 (iOS 10). Điều này đặc biệt quan trọng đối với các ứng dụng hỗ trợ thiết bị iPad cũ và iPhone 5s với iOS 10/11.

Sự khác biệt giữa minification và nén

Minification và nén (gzip, brotli) là các giai đoạn tối ưu hóa khác nhau. Minification hoạt động ở cấp độ mã nguồn và giảm số lượng ký tự trước khi gửi lên máy chủ. Nén hoạt động ở cấp độ giao thức truyền tải và được máy chủ (nginx, Apache, CDN) áp dụng khi truyền tệp đến máy khách. Minification giảm kích thước trước khi nén, tạo ra hiệu ứng kép: gzip nén dữ liệu đã được giảm.

Tệp JavaScript 300 KB sau minification — 120 KB, sau gzip — 35–40 KB. Nếu chỉ áp dụng gzip cho tệp chưa minify, kích thước sẽ là 55–70 KB. Minification + gzip cho kết quả tốt hơn 30–40% so với chỉ dùng gzip. Brotli (cấp độ 6) nén hiệu quả hơn 15–20% so với gzip sau minification.