SingleSPA Berfungsi. Import Map Tidak Menguruskan Dirinya Sendiri

SingleSPA berfungsi. Kami menjalankan aplikasi React, Vue, dan Angular pada satu halaman. Ia dimuatkan secara bebas. Framework ini memang berkesan.

Masalahnya bukan pada framework tersebut. Masalahnya adalah ekosistem di sekelilingnya.

Dalam seni bina teragih, anda memerlukan pemilikan. Anda memerlukan pengauditan. Anda memerlukan tadbir urus. SingleSPA menjadikan keperluan ini jelas kerana import map merupakan titik koordinasi pusat.

Import map berada dalam konfigurasi akar (root config) anda. Ia adalah fail JSON. Ia memberitahu setiap micro frontend (MFE) versi React mana yang perlu dimuatkan. Secara teori, ia adalah sumber kebenaran (source of truth). Namun dalam praktiknya, tiada sesiapa yang memilikinya.

Setiap pasukan memiliki MFE mereka sendiri. Tiada sesiapa yang memiliki map tersebut.

Ini mewujudkan masalah:

  • Pasukan menamatkan penggunaan MFE, tetapi entri tersebut kekal dalam map.
  • Dependensi baharu muncul, tetapi tiada sesiapa yang menambahnya ke dalam map.
  • Map menjadi usang sementara anda mengabaikannya.

Kami menemui sebuah MFE dalam map kami yang tidak pernah dideploy selama lapan bulan. Ia sudah tidak digunakan, tetapi masih dimuatkan dalam produksi. Tiada sesiapa yang menyedarinya kerana tiada sesiapa yang memerhatikannya.

Anda mungkin terfikir untuk menjana map secara automatik semasa proses binaan (build). Kami telah mencubanya. Ia mewujudkan masalah baharu: konflik penggabungan (merge conflicts). Jika empat belas pasukan semuanya cuba menulis ke dalam satu fail JSON semasa setiap deploy, saluran paip CI anda akan menjadi kucar-kacir.

Isu lain adalah penyimpangan (drift). Polanya mudah: tandakan React sebagai 'external' dalam konfigurasi anda. Biarkan import map yang menyediakannya. Ini mengelakkan bundle pendua.

Tetapi kemudian, seseorang melakukan refactor pada kod mereka. Mereka secara tidak sengaja membungkus (bundle) semula React ke dalam MFE mereka. Binaan (build) berjaya. Ujian berjaya. Deploy menunjukkan status hijau.

Anda hanya akan menyedarinya apabila:

  • Saiz bundle melonjak.
  • Ketidakpadanan versi merosakkan komponen.
  • Anda melihat React dimuatkan dua kali dalam Chrome DevTools.

Kami mengaudit sistem kami dan mendapati dua MFE menghantar React mereka sendiri. Binaan mereka menunjukkan status hijau. Mereka tidak menyedari bahawa mereka telah melanggar pematuhan (out of compliance).

Import map dan fail package.json anda adalah dua input yang berbeza. Ia menyimpang secara senyap.

Semakan CI boleh mengesan bundle pendua. Ia tidak dapat mengesan ketidakpadanan versi. Jika MFE A menggunakan React 18.2 dan MFE B menggunakan 18.3, binaan tidak akan gagal. Tetapi komponen kongsi anda akan rosak semasa masa larian (runtime).

Apabila kami perlu mengemas kini React, kami menghabiskan masa berjam-jam melakukan 'grep' melalui empat belas repositori yang berbeza. Ini adalah tidak cekap.

Kami telah membina satu alat untuk menyelesaikan masalah ini. Ia melakukan dua perkara:

  1. Ia membina matriks versi daripada setiap package.json MFE.
  2. Ia membandingkan matriks tersebut dengan import map anda.

Alat ini menunjukkan jurang yang wujud. Ia menunjukkan pasukan mana yang patuh dan pasukan mana yang telah menyimpang. Ia juga mencari entri usang dan URL yang rosak. Kami menjalankannya setiap pagi Isnin. Ia hanya mengambil masa 12 saat.

Pengajaran kami bukanlah bersifat teknikal. Setiap seni bina teragih memerlukan pemilik bagi infrastruktur kongsi. Dalam SingleSPA, import map adalah infrastruktur. Jangan layan ia seperti fail kongsi. Layan ia sebagai aset yang diurus.

Bagaimana anda mengendalikan perkara ini? Adakah anda mempunyai pemilik import map? Atau adakah anda menghabiskan pagi Isnin anda dengan melakukan grepping pada fail?

Sumber: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe