Micro‑frontend đang trở thành lựa chọn phổ biến khi các đội ngũ cần phát triển, triển khai và mở rộng các phần độc lập của một ứng dụng lớn. Bài viết này chia sẻ quy trình thực tế để áp dụng Module Federation của Webpack 5 vào một monorepo React (Web + React Native) mà không làm phức tạp pipeline CI/CD. 1. Xác định ranh giới miền (domain boundaries) - Phân chia tính năng theo nghiệp vụ: authentication, dashboard, reporting, settings. - Mỗi miền trở thành một remote entry point riêng biệt, có package.json và webpack.config.js riêng. 2. Cấu hình Host và Remote - Host (shell app) chỉ chứa layout chung, routing cấp cao và shared UI kit. - Remote export component chính qua `exposes` trong `moduleFederationPlugin`. - Sử dụng `shared` để chia sẻ React, React‑DOM, React‑Native‑Web, TanStack Query, Zustand – tránh duplicate bundle. 3. Quản lý phiên bản và tương thích - Đặt `requiredVersion` cho từng shared dependency; bật `singleton: true` để đảm bảo chỉ một instance. - Khi remote cập nhật API nội bộ, bump minor version và publish lên registry nội bộ; host cập nhật `package.json` qua `npm install` trong pipeline. 4. Triển khai độc lập - Mỗi remote có pipeline build riêng (GitHub Actions + Turborepo) tạo artifact `remoteEntry.js` và upload lên CDN. - Host chỉ cần pull mới nhất `remoteEntry.js` tại runtime (hoặc tại build time nếu muốn immutable). 5. Kiểm thử tích hợp - Viết contract test với Pact giữa host và remote để phát hiện breaking change sớm. - Chạy end‑to‑end test trên Playwright (web) và Detox (mobile) sau khi merge remote. 6. Giám sát và rollback - Gắn version hash vào `window.__MICRO_FRONTEND_VERSION__` để tracing lỗi. - Nếu remote mới gây lỗi, host có thể chuyển về phiên bản trước bằng feature flag mà không cần deploy lại toàn bộ. Lợi ích thực tế: đội ngũ frontend có thể release tính năng dashboard mỗi tuần mà không chờ đợi chu kỳ release của toàn bộ ứng dụng; bundle size giảm 30% nhờ shared dependencies; rollback nhanh chóng khi incident xảy ra.