Minification — คืออะไร หลักการ minification และเครื่องมือสำหรับโค้ด

Minification คืออะไร?

Minification คือการแปลงซอร์สโค้ดอัตโนมัติที่ลบอักขระทั้งหมดที่ไม่ส่งผลต่อการทำงานของโปรแกรม ช่องว่าง แท็บ อักขระขึ้นบรรทัดใหม่ ความคิดเห็น และวงเล็บที่ซ้ำซ้อนจะถูกลบหรือย่อให้สั้นลง Minification ถูกนำไปใช้กับ JavaScript, CSS, HTML และน้อยครั้งกว่านั้นกับการกำหนดค่า JSON ก่อนการปรับใช้ในระบบผลิตจริง

เป้าหมายหลักของ minification คือการลดขนาดไฟล์ที่ส่งผ่านเครือข่าย ไฟล์ JavaScript ขนาด 300 KB หลังจากการ minification สามารถเหลือ 120–150 KB ซึ่งลดเวลาในการโหลดลง 200–400 ms บนการเชื่อมต่อ 3G ที่ช้า Google PageSpeed Insights และ Lighthouse แนะนำให้ minify โค้ดโดยตรง ซึ่งเป็นหนึ่งในเกณฑ์การประเมินประสิทธิภาพและ Core Web Vitals

Minification เป็นส่วนสำคัญของ ไปป์ไลน์การสร้าง (build pipeline) หลังจาก transpile ด้วย TypeScript หรือ Babel โค้ดจะผ่าน Tree Shaking (การลบฟังก์ชันที่ไม่ได้ใช้) จากนั้นผ่านมินิไฟเออร์ และหลังจากนั้นจึงประกอบเป็นบันเดิลสุดท้าย ในบันเดิลเลอร์สมัยใหม่ (Webpack, Rollup, esbuild) การ minification จะดำเนินการโดยปลั๊กอินในขั้นตอนสุดท้ายของการสร้าง

สิ่งที่ minification ลบออก

การทำงานของ minification: เทคนิคหลัก

การลบช่องว่างและการขึ้นบรรทัดใหม่ เป็นเทคนิคที่ง่ายและชัดเจนที่สุด ตัวแยกวิเคราะห์ของมินิไฟเออร์จะ遍历 AST (Abstract Syntax Tree) และลบอักขระช่องว่างทั้งหมดที่ไม่ได้เป็นส่วนหนึ่งของสตริงลิเทอรัล มินิไฟเออร์ส่วนใหญ่ยังรวมตัวดำเนินการเป็นบรรทัดเดียว ซึ่งช่วยประหยัดเพิ่มเติมเมื่อบีบอัดด้วย GZip หรือ Brotli

การแทนที่นามตัวแปร (mangling) เป็นเทคนิคที่รุนแรงมากขึ้น ตัวแปรท้องถิ่นและพารามิเตอร์ฟังก์ชันจะถูกเปลี่ยนชื่อเป็นตัวระบุแบบตัวอักษรเดียว: a, b, c ซึ่งช่วยลดขนาดอีก 15–30% Terser และ esbuild รองรับ mangling พร้อมตัวเลือกในการเก็บชื่อบางชื่อไว้ (เช่น API สาธารณะผ่าน mangle.props.reserved)

การกำจัดโค้ดที่ตายแล้ว

การกำจัดโค้ดที่ตายแล้ว (DCE) จะลบสาขาโค้ดที่ไม่เคยถูกเรียกใช้งาน มินิไฟเออร์จะวิเคราะห์เงื่อนไขที่เป็น false เสมอ (if (false)) และลบบล็อกที่เกี่ยวข้อง การวิเคราะห์ขั้นสูงจะดำเนินการในขั้นตอน Tree Shaking ก่อนการ minification แต่ DCE ในระดับมินิไฟเออร์จะจับกรณีท้องถิ่นของโค้ดที่ตายแล้วซึ่งไม่ถูกตรวจพบในระดับโมดูล

Mangling นามตัวแปร

Mangling จะเปลี่ยนชื่อตัวแปรท้องถิ่นและพารามิเตอร์ฟังก์ชันเป็นตัวระบุสั้น (หนึ่งหรือสองตัวอักษร) Terser ดำเนินการ mangling ตามขอบเขต: ตัวแปรภายในฟังก์ชันเดียวจะได้รับชื่อสั้นที่ไม่ซ้ำกันซึ่งไม่ขัดแย้งกับขอบเขตภายนอก ตัวเลือก mangle.reserved อนุญาตให้เก็บชื่อบางชื่อไว้ — ตัวอย่างเช่น API สาธารณะของไลบรารี

Mangling ไม่ส่งผลต่อตัวแปรโกลบอล คุณสมบัติของออบเจ็กต์ (เว้นแต่จะเปิดใช้งาน mangle.props) หรือชื่อคลาสที่ใช้กับ new เพื่อป้องกัน API สาธารณะของไลบรารีจาก mangling ให้ใช้ mangle.props.reserved ร่วมกับนิพจน์ปกติ: reserved: ["_prop", /^private_/] หากไม่มีการตั้งค่านี้ mangling อาจทำให้ไลบรารีพังหากโค้ดภายนอกเข้าถึงคุณสมบัติของออบเจ็กต์ตามชื่อ

ตัวอย่าง: ก่อนและหลังการ minification

// ซอร์สโค้ด
function calculateTotal(price, tax) {
    var result = price + (price * tax);
    // คืนค่ารวมทั้งหมด
    return result;
}

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

// หลังการ minification ด้วย Terser
function calculateTotal(a, b){return a + a * b}
var c = calculateTotal(100, .2);
console.log(c);

ในตัวอย่างที่สอง Terser ลบความคิดเห็น ช่องว่าง และการขึ้นบรรทัดใหม่ เปลี่ยนชื่อ price เป็น a, tax เป็น b, result เป็น c ขนาดลดลงจาก 197 ตัวอักษรเหลือ 79 — ประหยัดได้ 60% ในขณะเดียวกัน ฟังก์ชันการทำงานของโค้ดยังคงสมบูรณ์: calculateTotal(100, 0.2) คืนค่า 120

เครื่องมือ minification: Terser, esbuild, UglifyJS

Terser เป็นมินิไฟเออร์ JavaScript มาตรฐานในระบบนิเวศของ Webpack และบันเดิลเลอร์สมัยใหม่ส่วนใหญ่ Terser รองรับไวยากรณ์ ES6+ (ฟังก์ชันลูกศร, async/await, spread), mangling พร้อมการป้องกัน API สาธารณะ, source maps และการทำงานแบบขนานตามจำนวน CPU ตั้งแต่เวอร์ชัน 5.16 Terser รวมการปรับแต่งสำหรับ TypeScript — การลบ import เฉพาะชนิดและอินเทอร์เฟซ

esbuild เป็นมินิไฟเออร์ที่เขียนด้วย Go ซึ่งฝังอยู่ในบันเดิลเลอร์ชื่อเดียวกัน esbuild ดำเนินการ minification เร็วกว่า Terser 10–100 เท่าด้วยโค้ดเนทีฟและการประมวลผลแบบขนาน อย่างไรก็ตาม esbuild รองรับการปรับแต่งน้อยกว่า: มันไม่ทำ mangling พร้อมการเก็บรักษาคุณสมบัติ ไม่ลบ import เฉพาะชนิด และปรับแต่งนิพจน์อย่างรุนแรงน้อยกว่า

การกำหนดค่า Terser ใน Webpack

// webpack.config.js — การกำหนดค่า 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,
      }),
    ],
  },
};

การกำหนดค่า TerserPlugin ประกอบด้วยสามบล็อกหลัก compress จัดการการปรับแต่งนิพจน์: drop_console ลบ console.log, drop_debugger ลบ debugger, dead_code ลบสาขาที่ไม่สามารถเข้าถึงได้ mangle ควบคุมการเปลี่ยนชื่อตัวแปรด้วย reserved เพื่อป้องกันชื่อสาธารณะ parallel เปิดใช้งานมัลติเธรดตามจำนวน CPU

CSS Minification ด้วย esbuild

// esbuild: คำสั่ง CLI สำหรับการ minification JS และ 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 รองรับการกำหนดค่าแบบบรรทัดเดียว minify: true เปิดใช้งานการ minification ทั้ง JS และ CSS sourcemap: true สร้างแผนที่โค้ดสำหรับการดีบัก target กำหนดระดับ ES ขั้นต่ำ — esbuild จะ transpile โค้ดสมัยใหม่โดยอัตโนมัติสำหรับเวอร์ชันที่เลือก esbuild มีประสิทธิภาพโดยเฉพาะสำหรับโปรเจกต์ที่เวลาในการสร้างเป็นสิ่งสำคัญ: ไปป์ไลน์ CI/CD, Hot Module Replacement และต้นแบบที่รวดเร็ว

Minification ใน React Native และ WebView

React Native ใช้ Metro Bundler — บันเดิลเลอร์ของตัวเองที่รวม minification บนพื้นฐาน Terser ในโหมดผลิตจริง Metro จะใช้ minification กับบันเดิล JavaScript ของแอปพลิเคชันโดยอัตโนมัติ การกำหนดค่า minification ใน Metro ถูกตั้งค่าผ่าน metro.config.js ในส่วน transformer.minifierConfig นอกจากนี้ สามารถปิดใช้งาน inline-require เพื่อลดขนาดบันเดิลบน iOS

WebView ในแอปพลิเคชันมือถือก็ได้รับประโยชน์จาก minification เช่นกัน HTML, CSS และ JS ที่โหลดใน WebView ควรถูก minify ก่อนที่จะฝังในแอปพลิเคชันหรือโหลดจากเซิร์ฟเวอร์ สำหรับทรัพยากรท้องถิ่น (Assets) การ minification มีความสำคัญเป็นพิเศษ — ขนาด APK/IPA ส่งผลโดยตรงต่ออัตราการติดตั้งในร้านค้าแอป

Hermes และ Minification

Hermes เป็นเอนจิน JavaScript สำหรับ React Native ที่พัฒนาโดย Facebook Hermes ดำเนินการคอมไพล์ไบต์โค้ดแบบ Ahead-of-Time (AOT) ซึ่งลดเวลาเริ่มต้นแอปพลิเคชันลง 30–50% สำหรับ Hermes การ minification บันเดิล JavaScript จะดำเนินการก่อนการคอมไพล์ไบต์โค้ดโดยใช้ Terser Hermes รองรับรูปแบบ HBC (Hermes Bytecode) ของตัวเอง แต่ขั้นตอนการ minification JS ยังคงจำเป็น

การกำหนดค่า Metro สำหรับ React Native

// metro.config.js — การกำหนดค่า 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 ที่มี minifierConfig.drop_console จะลบ console.log ทั้งหมดออกจากบันเดิลผลิตจริงของ React Native พารามิเตอร์ mangle.safari10 ป้องกันการเปลี่ยนชื่อตัวระบุที่ทำให้ Safari 10 (iOS 10) เสียหาย ซึ่งสำคัญเป็นพิเศษสำหรับแอปพลิเคชันที่รองรับอุปกรณ์เก่าเช่น iPad และ iPhone 5s ที่ใช้ iOS 10/11

ความแตกต่างระหว่าง minification และการบีบอัด

Minification และการบีบอัด (gzip, brotli) เป็นขั้นตอนการปรับแต่งที่แตกต่างกัน Minification ทำงานในระดับซอร์สโค้ดและลดจำนวนอักขระก่อนส่งไปยังเซิร์ฟเวอร์ การบีบอัดทำงานในระดับโปรโตคอลการส่งผ่านและถูกนำไปใช้โดยเซิร์ฟเวอร์ (nginx, Apache, CDN) เมื่อส่งไฟล์ไปยังไคลเอนต์ Minification ลดขนาดก่อนการบีบอัด ซึ่งให้ผลสองเท่า: gzip บีบอัดข้อมูลที่ลดลงแล้ว

ไฟล์ JavaScript ขนาด 300 KB หลัง minification — 120 KB, หลัง gzip — 35–40 KB หากใช้ gzip เพียงอย่างเดียวกับไฟล์ที่ไม่ได้ minify ขนาดจะอยู่ที่ 55–70 KB Minification + gzip ให้ผลลัพธ์ดีกว่า gzip เพียงอย่างเดียว 30–40% Brotli (ระดับ 6) บีบอัดเพิ่มเติมได้อย่างมีประสิทธิภาพมากกว่า gzip 15–20% หลังการ minification