Mengotomatiskan optimasi gambar dengan pipeline WASM 2025 — Integrasi esbuild dan Lightning CSS

Bagi pengembang web yang menyeimbangkan build Jamstack dan pengiriman edge, pertanyaan „berapa banyak pekerjaan gambar dilakukan saat build dan berapa banyak saat permintaan" tidak pernah selesai. Pada 2025, ekosistem WASM (WebAssembly) akhirnya menghadirkan kompiler dan optimizer cepat yang berjalan di Node.js tanpa GPU namun tetap menghasilkan derivatif kelas produksi. Panduan ini menunjukkan cara merakit pipeline build berbasis esbuild dan Lightning CSS, dilengkapi Squoosh CLI serta encoder AVIF berbasis WASM, lalu menghubungkannya langsung ke CI/CD.

TL;DR

• Bundle WASM tiga lapis: (1) kompilasi TypeScript + plugin WASM dengan esbuild, (2) jalankan Squoosh CLI di Worker Threads, (3) biarkan Lightning CSS membuat image-set() otomatis.
• Aturan derivatif deklaratif: definisikan ukuran/format/kualitas dalam assets.manifest.json, lalu baca melalui plugin esbuild.
• Reproduksibilitas CI: gunakan ulang cache .uasset yang ringan alih-alih blob Git LFS dan regenerasi otomatis saat hash berbeda.
• Validasi lokal terlebih dahulu: padukan Playwright dengan Image Compare Slider untuk menemukan artefak visual sebelum merge.
• Fallback dan tanda tangan: gabungkan profil ICC ke WebP/AVIF lewat Converter lanjutan dan simpan PNG bertanda tangan C2PA sebagai fallback akhir.

Gambaran pipeline

Mengendalikan derivatif dengan manifesto deklaratif

Skrip npm ad-hoc membuat aturan sulit dilacak. Simpan niat dalam manifesto JSON.

{
  "hero-landing": {
    "source": "assets/hero-source.tif",
    "variants": [
      { "format": "avif", "width": 1600, "quality": 0.82 },
      { "format": "webp", "width": 1200, "quality": 0.88 },
      { "format": "jpeg", "width": 800, "quality": 0.92, "icc": "profiles/display-p3.icc" }
    ],
    "responsive": {
      "breakpoints": ["(min-width: 1280px) 1200px", "(min-width: 768px) 65vw", "100vw"],
      "density": ["1x", "2x"]
    }
  }
}

Plugin esbuild membaca file tersebut dan menjadwalkan pekerjaan WASM secara paralel.

Implementasi plugin esbuild

// build/plugins/image-pipeline.ts
import { Plugin } from 'esbuild'
import { readFile } from 'node:fs/promises'
import { runPipeline } from '../wasm/run-pipeline'

export const imagePipeline = (): Plugin => ({
  name: 'image-pipeline',
  setup(build) {
    build.onStart(async () => {
      const manifest = JSON.parse(await readFile('assets.manifest.json', 'utf-8'))
      await runPipeline(manifest)
    })
  }
})

runPipeline memutar Worker Thread, mengendalikan tingkat konkurensi, dan menangani kegagalan secara elegan.

// build/wasm/run-pipeline.ts
import { Worker } from 'node:worker_threads'
import os from 'node:os'

const workerCount = Math.max(1, Math.min(os.cpus().length - 1, 4))

export async function runPipeline(manifest: Record<string, any>) {
  const entries = Object.entries(manifest)
  await Promise.all(entries.map(([id, config]) => dispatchWorker(id, config)))
}

function dispatchWorker(id: string, config: any) {
  return new Promise((resolve, reject) => {
    const worker = new Worker(new URL('./workers/image-worker.ts', import.meta.url), {
      workerData: { id, config }
    })
    worker.once('message', resolve)
    worker.once('error', reject)
    worker.once('exit', code => code !== 0 && reject(new Error(`worker ${id} exited ${code}`)))
  })
}

Di dalam worker, cache biner WASM untuk menghindari waktu muat dingin berulang.

// build/wasm/workers/image-worker.ts
import { parentPort, workerData } from 'node:worker_threads'
import { createRequire } from 'node:module'
const require = createRequire(import.meta.url)

const squoosh = require('@squoosh/lib')
const avif = require('@squoosh/avif')

(async () => {
  const { id, config } = workerData
  const { source, variants } = config
  const jobs = variants.map(async variant => {
    const image = await squoosh.ImagePool.fromPath(source)
    await image.encode({
      [variant.format]: {
        quality: Math.round(variant.quality * 100),
        effort: 7
      }
    })
    await image.save(`public/images/${id}-${variant.width}.${variant.format}`)
  })
  await Promise.all(jobs)
  parentPort?.postMessage({ id, ok: true })
})()

Menghasilkan CSS otomatis dengan Lightning CSS

Agar deklarasi CSS selalu sinkron dengan manifesto, tambahkan Lightning CSS ke pipeline.

// build/styles/picture-plugin.ts
import { readFileSync } from 'node:fs'
import { transform } from 'lightningcss'
import manifest from '../../asset-map.json'

export function injectImageSets(cssPath: string) {
  const css = readFileSync(cssPath)
  const result = transform({
    filename: cssPath,
    code: css,
    drafts: { nesting: true },
    visitor: {
      Rule(rule) {
        if (!rule.selectors.includes('.hero-visual')) return
        const sources = manifest['hero-landing'].imageSet
        rule.declarations.push({
          kind: 'declaration',
          property: 'background-image',
          value: {
            type: 'value',
            value: `image-set(${sources.join(', ')})`
          }
        })
      }
    }
  })
  return result.code
}

Setelah build, Lightning CSS membaca asset-map.json, mengeluarkan aturan image-set() dan menyelaraskannya dengan blok @media. Karena transformatornya sendiri berjalan di WASM, hot reload tetap lincah.

Diff dan tanda tangan di CI

Build WASM memang cepat, tetapi kerusakan tersembunyi tetap mungkin. Lindungi lewat CI.

1. Diff visual: tangkap bagian hero dengan Playwright dan hitung ΔE2000 via CLI Image Compare Slider.
2. Pemeriksaan metadata: gunakan ExifTool dan Converter lanjutan untuk memastikan profil ICC dan XMP tetap ada.
3. Penandatanganan C2PA: tanda tangani PNG fallback dengan CLI cai dan tambahkan URI tanda tangan ke asset-map.json.

# .github/workflows/build.yml
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build:images
      - run: npm run test:visual
      - run: npm run sign:fallback
      - uses: actions/upload-artifact@v4
        with:
          name: wasm-assets
          path: public/images

Artefak memangkas waktu rebuild lebih dari 40%. Jika hash tidak cocok, regenerasi derivatif dan beri tahu tim melalui Slack.

Praktik terbaik untuk distribusi edge

• Kunci cache: hindari sakelar ?format= yang sembarang; gunakan negosiasi Accept.
• Header: tetapkan public, max-age=31536000, immutable sebagai default dan tambahkan must-revalidate hanya pada PNG bertanda tangan C2PA.
• Fallback: bila konversi WASM gagal, kembalikan JPEG berkualitas tinggi yang dihasilkan Converter lanjutan melalui Lambda@Edge.
• Monitoring: kumpulkan LargestContentfulPaint dengan PerformanceObserver dan pantau regresi saat ukuran derivatif berubah.

Daftar periksa implementasi

• [ ] assets.manifest.json mendeklarasikan semua aturan derivatif.
• [ ] Worker WASM membatasi konkurensi sesuai jumlah inti CPU.
• [ ] asset-map.json mencatat format, dimensi, dan hash.
• [ ] Playwright + Image Compare Slider mengotomatisasi diff visual.
• [ ] Converter lanjutan menangani embedding ICC dan penandatanganan di alur rilis.
• [ ] Negosiasi Accept dan fallback diuji di CDN.

Ringkasan

Pipeline berbasis WASM lebih mudah dipasang dibanding toolchain native dan memberi hasil konsisten di CI cloud. Dengan memusatkan alur pada esbuild dan Lightning CSS serta menambahkan Squoosh dan encoder WASM, tim web menyelesaikan optimasi gambar di tahap build sehingga biaya runtime menurun. Kombinasikan dengan validasi dan tanda tangan otomatis, Anda mendapatkan pipeline yang menyeimbangkan performa dan kepercayaan—siap untuk peluncuran global.