SingleSPA hoạt động tốt. Nhưng Import Maps không tự quản lý được chính nó

SingleSPA hoạt động tốt. Chúng tôi chạy các ứng dụng React, Vue và Angular trên cùng một trang. Chúng tải độc lập với nhau. Framework này thực sự đáp ứng được kỳ vọng.

Vấn đề không nằm ở framework. Vấn đề nằm ở hệ sinh thái xung quanh nó.

Trong một kiến trúc phân tán, bạn cần quyền sở hữu (ownership). Bạn cần kiểm tra (auditing). Bạn cần quản trị (governance). SingleSPA làm cho các nhu cầu này trở nên rõ ràng vì import map là điểm điều phối trung tâm.

Import map nằm trong root config của bạn. Nó là một tệp JSON. Nó cho biết mỗi micro frontend (MFE) cần tải phiên bản React nào. Về lý thuyết, nó là nguồn sự thật duy nhất (source of truth). Nhưng trên thực tế, không ai sở hữu nó.

Mỗi nhóm sở hữu MFE riêng của họ. Nhưng không ai sở hữu bản đồ (map) này cả.

Điều này tạo ra các vấn đề:

  • Các nhóm ngừng sử dụng một MFE, nhưng entry vẫn còn tồn tại trong map.
  • Các dependency mới xuất hiện, nhưng không ai thêm chúng vào map.
  • Map dần trở nên lỗi thời trong khi bạn bỏ mặc nó.

Chúng tôi đã tìm thấy một MFE trong map của mình mà đã tám tháng không được deploy. Nó đã "chết", nhưng vẫn đang được tải trong môi trường production. Không ai nhận ra vì không ai kiểm tra cả.

Bạn có thể nghĩ đến việc tự động tạo map trong quá trình build. Chúng tôi đã thử cách đó. Nó lại tạo ra một vấn đề mới: xung đột khi merge (merge conflicts). Nếu cả mười bốn nhóm đều cố gắng ghi vào cùng một tệp JSON trong mỗi lần deploy, pipeline CI của bạn sẽ trở nên cực kỳ hỗn loạn.

Một vấn đề khác là sự sai lệch (drift). Mô hình này rất đơn giản: đánh dấu React là một external trong config của bạn. Hãy để import map cung cấp nó. Điều này giúp ngăn chặn việc trùng lặp các bundle.

Nhưng rồi ai đó refactor lại code của họ. Họ vô tình đóng gói (bundle) React ngược trở lại vào trong MFE của mình. Build vẫn pass. Test vẫn pass. Deploy vẫn báo xanh.

Bạn chỉ nhận ra khi:

  • Kích thước bundle tăng đột biến.
  • Sự không khớp về phiên bản (version mismatch) làm hỏng một component.
  • Bạn thấy React được tải hai lần trong Chrome DevTools.

Chúng tôi đã kiểm tra hệ thống của mình và phát hiện ra hai MFE đang gửi kèm cả React riêng của chúng. Build của chúng vẫn báo xanh. Họ hoàn toàn không biết rằng mình đang không tuân thủ quy chuẩn (out of compliance).

Import map và các tệp package.json của bạn là hai đầu vào riêng biệt. Chúng âm thầm dần trở nên sai lệch với nhau.

Một bước kiểm tra CI có thể tìm thấy các bundle bị trùng lặp. Nhưng nó không thể tìm thấy sự không khớp về phiên bản. Nếu MFE A sử dụng React 18.2 và MFE B sử dụng 18.3, quá trình build sẽ không thất bại. Nhưng các shared component của bạn sẽ bị lỗi khi chạy (at runtime).

Khi cần cập nhật React, chúng tôi phải mất hàng giờ đồng hồ để grep qua mười bốn repository khác nhau. Điều này thật kém hiệu quả.

Chúng tôi đã xây dựng một công cụ để khắc phục vấn đề này. Nó thực hiện hai việc:

  1. Nó xây dựng một ma trận phiên bản từ package.json của mỗi MFE.
  2. Nó so sánh ma trận đó với import map của bạn.

Công cụ này cho bạn thấy sự sai lệch. Nó cho bạn biết đội ngũ nào đang tuân thủ và đội ngũ nào đã bị lệch khỏi quy chuẩn. Nó cũng tìm ra các mục lỗi thời và các URL bị hỏng. Chúng tôi chạy nó vào mỗi sáng thứ Hai. Nó chỉ mất 12 giây.

Bài học của chúng tôi không nằm ở khía cạnh kỹ thuật. Mọi kiến trúc phân tán đều cần một người chịu trách nhiệm quản lý cơ sở hạ tầng dùng chung. Trong SingleSPA, import map chính là cơ sở hạ tầng. Đừng coi nó như một tệp tin dùng chung. Hãy coi nó như một tài sản được quản lý.

Bạn xử lý việc này như thế nào? Bạn có người quản lý import map không? Hay bạn dành cả sáng thứ Hai để grep các tệp tin?

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