Satu impor ikon dinamis membuat crash dev server pada mesin Windows Subsystem for Linux 2 (WSL2) dengan RAM 16 GB, yang memaksa proses vmmemWSL melahap seluruh memori yang tersedia dan membekukan seluruh jendela Linux. Crash tersebut terjadi saat menjalankan proyek Next.js 16 yang menggunakan Turbopack, dan terjadi meskipun sudah ada file .wslconfig yang membatasi penggunaan RAM VM.

Mengapa satu impor kecil bisa menjadi masalah besar

Pengembang mencoba melakukan resolve ikon pada saat runtime dengan entry point dinamis. Impor tersebut menarik paket ikon yang berisi sekitar 9.000 modul. Turbopack, bundler berbasis Rust yang menjalankan dev server Next.js 16, membangun peta modul (module map) yang lengkap untuk setiap paket yang disentuhnya. Dalam mode dev, peta tersebut tersimpan di memori dan diperbarui pada setiap perubahan file. Memuat seluruh paket ikon memaksa Turbopack untuk mengalokasikan RAM dalam jumlah besar, sehingga dengan cepat mencapai batas maksimal (hard ceiling) yang ditetapkan oleh file .wslconfig. Setelah batas tercapai, VM WSL berhenti merespons; Ctrl + C tidak bereaksi apa pun dan satu-satunya jalan keluar adalah mematikan paksa host Windows.

Build produksi dari kode yang sama berhasil karena bundler mengompilasi graph satu kali, menghasilkan aset, lalu selesai. Namun, dev server menjaga graph tetap ada di memori untuk memungkinkan hot-reloading. Oleh karena itu, build yang berhasil (green build) tidak menjamin bahwa lingkungan dev dapat bertahan terhadap pola impor yang sama.

Dampak yang lebih luas

Pengembang yang bekerja pada toolchain berbasis Linux di dalam Windows mengandalkan WSL2 untuk mengisolasi penggunaan sumber daya. Ketika satu impor menghabiskan memori VM, seluruh host dapat menjadi lambat atau tidak responsif, yang memengaruhi kontainer atau aplikasi lain di mesin yang sama. Insiden ini juga menyoroti ketidakcocokan antara flag penyetelan memori Node.js yang umum dengan arsitektur Turbopack: Turbopack berjalan di Rust, bukan V8, sehingga meningkatkan flag Node --max-old-space-size tidak akan berpengaruh dalam menekan konsumsi RAM-nya.

Apa yang sebenarnya terjadi

  • Entry point dinamis: Pernyataan impor meminta bundler untuk memperlakukan seluruh paket ikon sebagai satu modul tunggal yang dimuat secara malas (lazily-loaded). Turbopack merespons dengan melakukan parsing pada setiap file secara agresif (eagerly) untuk membangun peta modul.
  • Graph dev-server: Berbeda dengan kompilasi produksi sekali jalan, dev server mempertahankan seluruh graph dependensi di RAM untuk memberikan umpan balik instan pada perubahan file.
  • Batasan memori: File .wslconfig membatasi VM hanya pada sebagian kecil RAM host. Ketika permintaan Turbopack melebihi batasan tersebut, VM membeku.

Solusi yang memangkas memori hingga setengahnya

Pengembang menerapkan tiga perubahan praktis yang mengurangi penggunaan RAM dari 3,6 GB menjadi 1,87 GB dan memulihkan stabilitas:

  1. Berhenti menggunakan entry point dinamis untuk aset kecil – Impor hanya ikon yang Anda butuhkan, misalnya import { SearchIcon } from 'icon-pack/search'. Jika Anda hanya butuh beberapa saja, SVG inline bahkan lebih ringan.
  2. Aktifkan optimizePackageImports di next.config.ts – Opsi ini memberi tahu Turbopack untuk menyelesaikan impor ke jalur file konkretnya alih-alih ke root paket, sehingga mencegahnya memuat seluruh pohon paket.
  3. Jangan mengandalkan flag heap Node – Karena penggunaan memori Turbopack diatur oleh runtime Rust-nya, --max-old-space-size tidak berpengaruh pada masalah ini.

Tetap mempertahankan batasan .wslconfig tetap disarankan. Batasan keras (hard cap) dapat menyebabkan VM berhenti sejenak alih-alih membuat host Windows crash, sehingga memberi Anda kesempatan untuk melakukan intervensi sebelum semuanya macet.

Hal yang perlu diperhatikan dalam alur kerja Anda

  • Dashboard memori: Alat seperti htop di dalam WSL atau Windows Task Manager dapat menunjukkan kapan vmmemWSL melonjak. Atur peringatan jika penggunaan mendekati batas yang telah dikonfigurasi.
  • Audit ukuran paket: Sebelum menambahkan pustaka, periksa berapa banyak modul yang disertakan. Paket ikon besar, koleksi utilitas, atau pustaka komponen dapat membengkakkan graph dev secara diam-diam.
  • Impor selektif: Utamakan named imports atau jalur file langsung daripada wildcard atau impor dinamis, terutama di lingkungan dev di mana bundler menjaga semuanya tetap ada di memori.
  • Paritas produksi vs. dev: Anggap build produksi yang berhasil sebagai langkah validasi yang terpisah. Jalankan dev server dengan monitor memori untuk menangkap masalah yang hanya muncul selama hot-reloading.

Kesimpulan

Satu paket ikon yang diimpor secara dinamis dapat mengonsumsi RAM yang cukup untuk melumpuhkan dev server Next.js berbasis WSL2, bahkan ketika sumber daya host sengaja dibatasi. Dengan menghindari impor dinamis yang luas, mengaktifkan optimasi impor tingkat paket, dan memantau penggunaan memori, pengembang dapat menjaga lingkungan Linux-di-dalam-Windows mereka tetap responsif dan menghindari shutdown paksa.