Giới Thiệu

Micro Frontends (MF) đã trở thành một chiến lược phát triển quan trọng trong lĩnh vực web, cung cấp giải pháp cho nhiều vấn đề trong quy trình phát triển và bảo trì ứng dụng. MF giúp các nhà phát triển xây dựng và triển khai ứng dụng một cách độc lập, gia tăng khả năng tái sử dụng các module, hỗ trợ phát triển đa nền tảng và cải thiện khả năng mở rộng và bảo trì. Tuy nhiên, mô hình này cũng đi kèm với một số thách thức, như việc triển khai khó khăn và quản lý state chia sẻ.

Hiện nay, với sự phát triển mạnh mẽ của các ứng dụng Single Page Application (SPA), Module Federation trở thành một giải pháp khả thi và hiệu quả cho việc triển khai MF. Mô hình này có thể được áp dụng cho các framework SPA phổ biến như React, Angular, và Vue. Trong bài viết này, tôi sẽ hướng dẫn bạn cách triển khai và xây dựng một component có thể chia sẻ giữa các ứng dụng MF sử dụng React.

Hướng Dẫn Triển Khai

Bước 1: Tạo Ứng Dụng Chia Sẻ Bằng React + Webpack

• Tạo một thư mục mới cho ứng dụng và khởi động nó bằng lệnh sau:

  Copy

  yarn init

• Cài đặt các thư viện cần thiết cho project React:

  Copy

  yarn add react react-dom

• Tiến hành cấu hình Webpack cho ứng dụng:

  javascript Copy

  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();
  };

Bước 2: 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;

Bước 3: Tạo Ứng Dụng Sử Dụng Module Chia Sẻ

• Thực hiện tương tự như bước 1 để tạo ứng dụng mới và thiết lập cấu hình tương tự.

• Cấu hình Module Federation cho ứng dụng mới:

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"],
    },
  },
};

• Cuối cùng, sử dụng module chia sẻ trong ứng dụng:

import AppButton from "application/AppButton"; // Nếu sử dụng TypeScript, cần định nghĩa module để tránh lỗi

Kết Luận

Bài viết này đã hướng dẫn bạn cách sử dụng Module Federation trong React để chia sẻ module giữa các ứng dụng. Bạn cũng có thể áp dụng tương tự cho các module lớn hơn như page.

Tài liệu tham khảo: Webpack Module Federation
source: viblo