1. 11:03 14/10/2026
1. Tổng quan
Micro‑frontends cho phép tách ứng dụng lớn thành các phần độc lập, mỗi phần có thể phát triển, triển khai và mở rộng riêng biệt. Module Federation (từ Webpack 5) là công cụ phổ biến để chia sẻ code ở runtime mà không cần build monorepo phức tạp. Bài viết này hướng dẫn cách áp dụng Module Federation cho hai nền tảng: Next.js (web) và React Native (Expo) trong cùng một hệ sinh thái.
2. Cài đặt Module Federation
- Cài đặt gói cần thiết: `npm i -D @module-federation/nextjs-config @module-federation/enhanced` cho Next.js và `npm i -D @module-federation/react-native` cho Expo.
- Tạo file `next.config.js` với plugin `ModuleFederationPlugin`:
```js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
webpack(config) {
config.plugins.push(new ModuleFederationPlugin({
name: 'host',
remotes: {
ui: 'ui@http://localhost:3001/remoteEntry.js',
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
}));
return config;
},
};
```
- Đối với Expo, thêm cấu hình vào `metro.config.js` hoặc sử dụng `expo-module-federation` để expose `remoteEntry.js`.
3. Chia sẻ thư viện chung
- Đặt `singleton: true` cho `react`, `react-native`, `react-dom` và các thư viện UI như `styled-components` để tránh tải nhiều bản sao.
- Sử dụng `requiredVersion` trong `package.json` của mỗi remote để đảm bảo phiên bản tương thích.
4. Tách feature thành remote
Ví dụ: component `Header` và `ProductList` nằm trong package `ui-lib`. Build `ui-lib` thành remote entry, sau đó host (Next.js) và app mobile (Expo) import:
```tsx
const Header = React.lazy(() => import('ui/Header'));
```
Sử dụng `Suspense` để hiển thị fallback khi remote đang tải.
5. Triển khai và versioning
- Mỗi remote deploy riêng (Vercel cho Next.js, EAS cho Expo).
- Cập nhật `remoteEntry.js` tự động qua CI/CD; host chỉ cần nạp URL mới mà không build lại.
- Áp dụng semantic versioning cho remote; host khai báo `remotes: { ui: 'ui@https://cdn.example.com/ui/[version]/remoteEntry.js' }`.
6. Mẹo thực chiến
- Dùng `moduleFederationConfig` để bật `runtimePlugins` cho HMR trên cả hai nền tảng.
- Giám sát lỗi runtime qua Sentry; bật `errorBoundary` bao quanh mỗi remote.
- Test tích hợp với Cypress (web) và Detox (mobile) trên môi trường staging trước khi release.
Kết luận: Module Federation giúp team web và mobile chia sẻ UI, logic nghiệp vụ mà vẫn giữ độc lập triển khai. Với cấu hình rõ ràng và chiến lược versioning chặt chẽ, bạn có thể mở rộng hệ thống mà không gặp "dependency hell".