Micro-frontend với Module Federation trong Webpack / Vite: Khi nào nên áp dụng?

Giải pháp cho các tổ chức công nghệ quy mô hàng trăm kỹ sư#

Khi ứng dụng Frontend phình to với hơn 50 lập trình viên cùng commit code vào một repository duy nhất:

• Thời gian CI/CD build kéo dài cả tiếng đồng hồ.
• Xung đột code (Merge conflicts) diễn ra hàng ngày.
• Một lỗi nhỏ ở module thanh toán có thể làm sập toàn bộ trang chủ.

Micro-frontend chia nhỏ ứng dụng frontend khổng lồ thành nhiều ứng dụng con độc lập, được phát triển và triển khai bởi các team riêng biệt. Công nghệ hàng đầu hiện nay là Module Federation.

Module Federation hoạt động như thế nào?#

Khác với kỹ thuật <iframe> cổ lỗ sĩ, Module Federation cho phép một ứng dụng Host nạp động các component được export từ ứng dụng Remote ngay trong thời gian chạy (runtime), đồng thời dùng chung thư viện nền (Shared Dependencies như React, ReactDOM) để không bị tải trùng lặp.

// vite.config.js của Remote App (Team Checkout)
import federation from '@originjs/vite-plugin-federation';

export default {
  plugins: [
    federation({
      name: 'checkoutApp',
      filename: 'remoteEntry.js',
      exposes: {
        './CheckoutWidget': './src/components/CheckoutWidget.tsx',
      },
      shared: ['react', 'react-dom']
    })
  ]
}

Cảnh báo: Đừng vội áp dụng Micro-frontend nếu chưa thực sự cần!#

Micro-frontend mang lại cái giá rất đắt về mặt chi phí vận hành:

• Debug lỗi giữa các remote app phức tạp hơn nhiều.
• Khó đồng bộ hóa Design System và CSS naming.
• Nguy cơ tải nhiều phiên bản framework khác nhau nếu cấu hình shared dependency không chặt chẽ.
• Lời khuyên: Chỉ áp dụng khi công ty bạn có từ 30-50 lập trình viên frontend trở lên và tổ chức thành các Feature Teams độc lập.

Góc thảo luận#

Có anh em nào trong cộng đồng đang vận hành hệ thống Micro-frontend trong thực tế chưa? Trải nghiệm deploy độc lập có thực sự bù đắp được sự phức tạp của kiến trúc này không?

Xem thêm nội dung liên quan:

• Học Thiết kế Hệ thống Frontend Lớn
• Bộ đề trắc nghiệm System Design