Mở đầu
Micro Frontends(MF) đã trở thành một xu hướng phát triển web quan trọng vì nó giải quyết một số vấn đề cụ thể và mang lại nhiều lợi ích cho quy trình phát triển và bảo trì ứng dụng web. MF mang lại nhiều lợi ích quan trọng cho việc phát triển và quản lý ứng dụng web: Phát triển và triển khai độc lập, tính tái sử dụng lại các module, phát triển đa nền tảng, dễ dàng mở rộng và bảo trì,... Mặc dù MF mang lại nhiều lợi ích nhưng cũng có một số nhược điểm và thách thức khi triển khai: khó triển khai, chia sẻ state,.. Có nhiều cách để triển khai MF trong các dự án thực tế. Với sự phát triển của các ứng dụng web Single Page Application(SPA) thì Module Federation(MF) là một lựa chọn tốt để thực hiện triển khai MF với các ứng dụng SPA. MF có thể được sử dụng với những framework SPA phổ biến nhất hiện nay: React, Angular, Vue. Sau một thời gian tìm hiểu và làm việc với MF, hôm nay mình sẽ hướng dẫn các bạn các triển khai và build một component để share giữa các ứng dụng MF với React.
Thực hiện
- Tạo ứng dụng share bằng React + Webpack.
- Tạo một folder chứa ứng dụng và khởi tạo ứng dụng với:
yarn init
- Cài đặt thư viện cho project React:
yarn add react react-dom
- Cấu hình webpack:
module.exports = (env, argv) => { const config = () => ({ entry: "/src/index.tsx", output: { path: path.join(__dirname, "/dist"), filename: "[name].js", chunkFilename: "[id].[contenthash:8].chunk.js", clean: true, publicPath: "http://localhost:3000/", }, devServer: { port: 3000, historyApiFallback: true, watchFiles: ["src/**/*"], }, module: { rules: [ { test: /\.m?js/, type: "javascript/auto", resolve: { fullySpecified: false, }, }, { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader", }, // Các config khác... ], }, resolve: { extensions: [".tsx", ".ts", ".js", ".css", "scss", "json"], plugins: [new TsconfigPathsPlugin({})], }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, "/src/index.html"), }), new ModuleFederationPlugin(federationConfig), new ModuleFederationTypesPlugin({ downloadTypesWhenIdleIntervalInSeconds: 120, }) ], optimization: { minimizer: [ new TerserPlugin({ extractComments: false, }), ], }, }); return config();
};
- Cấu hình module federation:
const federationConfig = { name: "application", filename: "remoteEntry.js", library: { type: "var", name: "application" }, exposes: { "./AppButton": "./src/components/appButton/AppButton.tsx" }, shared: { ...deps, react: { singleton: true, eager: true, requiredVersion: deps.react, }, "react-dom": { singleton: true, requiredVersion: deps["react-dom"], }, "react-router-dom": { singleton: true, requiredVersion: deps["react-router-dom"], } },
}; module.exports = federationConfig;
- Tạo ứng dụng sử dụng module share từ ứng dụng trên bằng React + Webpack.
- Các bước tạo ứng dụng và config giống ứng dụng trên
- Cấu hình module federation:
const federationConfig = { name: "remote-app", filename: "remoteEntry.js", remotes: { application: "application@http://localhost:3000/remoteEntry.js", }, shared: { ...deps, react: { singleton: true, eager: true, requiredVersion: deps.react, }, "react-dom": { singleton: true, requiredVersion: deps["react-dom"], }, "react-router-dom": { singleton: true, requiredVersion: deps["react-router-dom"], }, },
};
- Sử dụng module share:
import AppButton from "application/AppButton"; //Nếu code bằng typescript thì cần phải định nghĩa lại module để không báo lỗi
Kết luận
Đây là cách để sử dụng module federation trong react để share module. Các module lớn hơn như page cũng có thể share tương tự.