Import Maps

TL;DR: Import Maps adalah elemen <script type="importmap"> yang memetakan bare module specifier dalam import statement ke URL CDN atau path file. Sejak Chrome 89 (2021), Firefox 108 (2022), dan Safari 16.4 (2023), fitur ini memungkinkan landing page sederhana memakai library modern tanpa build step, ideal untuk eksperimen marketing atau microsite event.

Apa itu Import Maps?

Import Maps adalah JSON config yang ditaruh dalam tag <script type="importmap"> di HTML, memetakan import statement ke URL absolut. Sebelumnya, kode import React from "react" di browser akan error karena browser tidak tahu apa itu "react". Bundler seperti webpack, Vite, atau esbuild biasanya menyelesaikan ini di build time.

Dengan Import Maps, mapping ini bisa didefinisikan langsung di HTML, jadi browser tahu harus fetch dari mana saat import dieksekusi. Hasilnya, kode JavaScript modern bisa berjalan di browser tanpa proses build. Untuk konteks bundling tradisional, lihat juga Dynamic Import yang sering dipadukan dengan Import Maps.

Contoh Konkret

<script type="importmap">
{
  "imports": {
    "lit": "https://esm.sh/lit@3.1.0",
    "lit/": "https://esm.sh/lit@3.1.0/",
    "@/utils": "/js/utils.js"
  }
}
</script>
<script type="module">
  import { LitElement, html } from 'lit';
  import { format } from '@/utils';
</script>

Map "lit" ke URL CDN ESM, lalu pakai import seperti biasa. Browser akan fetch dari URL yang sudah dipetakan saat eksekusi module.

Kenapa Penting untuk Marketer Indonesia?

Untuk microsite kampanye atau landing page singkat, build step seringkali overkill. Import Maps memungkinkan deploy HTML statis ke Vercel atau Cloudflare Pages tanpa konfigurasi Node, webpack, atau Vite. Hasilnya, time-to-deploy turun dari 4 menit (build CI) ke kurang dari 20 detik (deploy file langsung). Cocok untuk tim marketing yang butuh iterasi cepat tanpa tunggu developer.

Pertanyaan Umum

Apakah Import Maps menggantikan bundler?

Tidak untuk aplikasi production besar. Bundler tetap unggul untuk tree-shaking, code splitting otomatis, dan optimasi minifier. Import Maps cocok untuk microsite, prototype, dan halaman sederhana di mana developer experience build step justru jadi friction.

Apakah dukungan browser sudah cukup baik?

Per Mei 2026, semua browser modern (Chrome, Firefox, Safari, Edge) sudah mendukung Import Maps. Browser lama bisa dibantu polyfill es-module-shims.