npm install webpack webpack-cli webpack-dev-server --save-dev
            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3000/',
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: {
 // Define remotes here, e.g., 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'RemoteApp',
 filename: 'remoteEntry.js',
 exposes: {
 './Widget': './src/Widget',
 // Add other exposed modules here
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            import React from 'react';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

const RemoteWidget = React.lazy(() => import('RemoteApp/Widget'));

const App = () => {
 const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);

 useEffect(() => {
  setIsWidgetLoaded(true);
 }, []);

 return (
  

  
Host Application
  
This is the host application.
  {isWidgetLoaded ? (
   Loading Widget...
}>
   
   
  ) : (
   
Loading...
  )}
  

คำอธิบาย:

• React.lazy(() => import('RemoteApp/Widget')): เป็นการ import โมดูล Widget จาก RemoteApp แบบไดนามิก ชื่อ RemoteApp สอดคล้องกับชื่อที่กำหนดในส่วน remotes ของการกำหนดค่า Webpack ของ host ส่วน Widget สอดคล้องกับชื่อโมดูลที่กำหนดในส่วน exposes ของการกำหนดค่า Webpack ของ remote
• React.Suspense: ใช้เพื่อจัดการการโหลดโมดูล remote แบบอะซิงโครนัส prop fallback จะระบุคอมโพเนนต์ที่จะแสดงผลในขณะที่โมดูลกำลังโหลด

6. รันแอปพลิเคชัน:

เริ่มทั้งแอปพลิเคชัน host และ remote โดยใช้ npm start (หรือวิธีที่คุณต้องการ) ตรวจสอบให้แน่ใจว่าแอปพลิเคชัน remote ทำงาน *ก่อน* แอปพลิเคชัน host

ตอนนี้คุณควรจะเห็น remote widget แสดงผลอยู่ภายในแอปพลิเคชัน host

เทคนิค Module Federation ขั้นสูง

นอกจากการตั้งค่าพื้นฐานแล้ว Module Federation ยังมีเทคนิคขั้นสูงหลายอย่างสำหรับการสร้างสถาปัตยกรรม micro-frontend ที่ซับซ้อน

1. การจัดการเวอร์ชันและการแชร์:

การจัดการ dependencies ที่ใช้ร่วมกันอย่างมีประสิทธิภาพเป็นสิ่งสำคัญอย่างยิ่งในการรักษาความเสถียรและหลีกเลี่ยงข้อขัดแย้ง Module Federation มีกลไกสำหรับระบุช่วงเวอร์ชันและอินสแตนซ์แบบ singleton ของโมดูลที่ใช้ร่วมกัน การใช้ property shared ในการกำหนดค่า Webpack ช่วยให้คุณควบคุมวิธีการโหลดและจัดการโมดูลที่ใช้ร่วมกันได้

ตัวอย่าง:

            shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 lodash: { eager: true, version: '4.17.21' }
}

            

              
                Copy
              
            
          

• singleton: true: ทำให้แน่ใจว่ามีการโหลดโมดูลเพียงอินสแตนซ์เดียว ซึ่งช่วยป้องกันการทำซ้ำและลดขนาด bundle สิ่งนี้มีความสำคัญอย่างยิ่งสำหรับไลบรารีอย่าง React และ ReactDOM
• requiredVersion: ระบุช่วงเวอร์ชันที่แอปพลิเคชันต้องการ Webpack จะพยายามโหลดเวอร์ชันของโมดูลที่เข้ากันได้
• eager: true: โหลดโมดูลทันที แทนที่จะโหลดแบบ lazy ซึ่งสามารถปรับปรุงประสิทธิภาพได้ในบางกรณี แต่อาจเพิ่มขนาด bundle เริ่มต้นได้

2. Dynamic Module Federation:

แทนที่จะ hardcode URL ของแอปพลิเคชัน remote คุณสามารถโหลดแบบไดนามิกจากไฟล์การกำหนดค่าหรือ API endpoint ได้ ซึ่งช่วยให้คุณสามารถอัปเดตสถาปัตยกรรม micro-frontend ได้โดยไม่ต้อง deploy แอปพลิเคชัน host ใหม่

ตัวอย่าง:

สร้างไฟล์การกำหนดค่า (เช่น remote-config.json) ที่มี URL ของแอปพลิเคชัน remote:

            {
 "RemoteApp": "http://localhost:3001/remoteEntry.js",
 "AnotherRemoteApp": "http://localhost:3002/remoteEntry.js"
}

            

              
                Copy
              
            
          

ในแอปพลิเคชัน host ให้ดึงไฟล์การกำหนดค่าและสร้างอ็อบเจ็กต์ remotes แบบไดนามิก:

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
const fs = require('fs');

module.exports = {
 // ... other configurations
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: new Promise(resolve => {
  fs.readFile(path.resolve(__dirname, 'remote-config.json'), (err, data) => {
  if (err) {
  console.error('Error reading remote-config.json:', err);
  resolve({});
  } else {
  try {
  const remotesConfig = JSON.parse(data.toString());
  resolve(remotesConfig);
  } catch (parseError) {
  console.error('Error parsing remote-config.json:', parseError);
  resolve({});
  }
  }
  });
 }),
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

หมายเหตุสำคัญ: พิจารณาใช้วิธีที่แข็งแกร่งกว่าในการดึงการกำหนดค่า remote ในสภาพแวดล้อม production เช่น API endpoint หรือบริการการกำหนดค่าโดยเฉพาะ ตัวอย่างข้างต้นใช้ fs.readFile เพื่อความเรียบง่าย แต่โดยทั่วไปแล้วไม่เหมาะสำหรับการ deploy ใน production

3. กลยุทธ์การโหลดที่กำหนดเอง:

Module Federation ช่วยให้คุณสามารถปรับแต่งวิธีการโหลดโมดูล remote ได้ คุณสามารถนำกลยุทธ์การโหลดที่กำหนดเองไปใช้เพื่อเพิ่มประสิทธิภาพหรือจัดการกับสถานการณ์เฉพาะ เช่น การโหลดโมดูลจาก CDN หรือการใช้ service worker

Webpack มี hooks ที่ช่วยให้คุณสามารถดักจับและแก้ไขกระบวนการโหลดโมดูลได้ ซึ่งช่วยให้สามารถควบคุมวิธีการดึงและเริ่มต้นโมดูล remote ได้อย่างละเอียด

4. การจัดการ CSS และสไตล์:

การแชร์ CSS และสไตล์ระหว่าง micro-frontends อาจเป็นเรื่องยุ่งยาก Module Federation รองรับแนวทางต่างๆ สำหรับการจัดการสไตล์ ได้แก่:

• CSS Modules: ใช้ CSS Modules เพื่อห่อหุ้มสไตล์ภายในแต่ละ micro-frontend ซึ่งช่วยป้องกันข้อขัดแย้งและรับประกันความสอดคล้องกัน
• Styled Components: ใช้ styled components หรือไลบรารี CSS-in-JS อื่นๆ เพื่อจัดการสไตล์ภายในคอมโพเนนต์เอง
• Global Styles: โหลดสไตล์ส่วนกลางจากไลบรารีที่ใช้ร่วมกันหรือ CDN โปรดระมัดระวังกับแนวทางนี้ เนื่องจากอาจทำให้เกิดข้อขัดแย้งได้หากสไตล์ไม่ได้ถูกกำหนด namespace อย่างถูกต้อง

ตัวอย่างการใช้ CSS Modules:

กำหนดค่า Webpack ให้ใช้ CSS Modules:

            module: {
 rules: [
 {
 test: /\.module\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 modules: {
 localIdentName: '[name]__[local]--[hash:base64:5]',
 },
 importLoaders: 1,
 },
 },
 'postcss-loader',
 ],
 },
 // ... other rules
],
}

            

              
                Copy
              
            
          

นำเข้า CSS Modules ในคอมโพเนนต์ของคุณ:

            import React from 'react';
import styles from './Widget.module.css';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

5. การสื่อสารระหว่าง Micro-Frontends:

บ่อยครั้งที่ micro-frontends จำเป็นต้องสื่อสารกันเพื่อแลกเปลี่ยนข้อมูลหรือกระตุ้นการกระทำ มีหลายวิธีในการทำเช่นนี้:

• Shared Events: ใช้ event bus ส่วนกลางเพื่อเผยแพร่และสมัครรับเหตุการณ์ ซึ่งช่วยให้ micro-frontends สามารถสื่อสารแบบอะซิงโครนัสได้โดยไม่มีการพึ่งพาโดยตรง
• Custom Events: ใช้ custom DOM events สำหรับการสื่อสารระหว่าง micro-frontends ภายในหน้าเดียวกัน
• Shared State Management: ใช้ไลบรารีการจัดการสถานะที่ใช้ร่วมกัน (เช่น Redux, Zustand) เพื่อรวมศูนย์สถานะและอำนวยความสะดวกในการแชร์ข้อมูล
• Direct Module Imports: หาก micro-frontends มีความเชื่อมโยงกันอย่างแน่นหนา คุณสามารถ import โมดูลจากกันและกันได้โดยตรงโดยใช้ Module Federation อย่างไรก็ตาม ควรใช้แนวทางนี้อย่างประหยัดเพื่อหลีกเลี่ยงการสร้าง dependencies ที่บ่อนทำลายประโยชน์ของ micro-frontends
• APIs และ Services: micro-frontends สามารถสื่อสารกันผ่าน API และบริการ ซึ่งช่วยให้มีการเชื่อมโยงแบบหลวมๆ และมีความยืดหยุ่นมากขึ้น สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อ micro-frontends ถูก deploy ในโดเมนที่แตกต่างกันหรือมีข้อกำหนดด้านความปลอดภัยที่แตกต่างกัน

ประโยชน์ของการใช้ Module Federation สำหรับ Micro-Frontends

• การขยายขนาดที่ดีขึ้น (Improved Scalability): micro-frontends สามารถขยายขนาดได้อย่างอิสระ ช่วยให้คุณสามารถจัดสรรทรัพยากรได้ตามที่ต้องการมากที่สุด
• การบำรุงรักษาที่เพิ่มขึ้น (Increased Maintainability): codebase ขนาดเล็กเข้าใจและบำรุงรักษาได้ง่ายขึ้น ซึ่งช่วยลดความเสี่ยงของข้อบกพร่องและปรับปรุงประสิทธิภาพของนักพัฒนา
• รอบการ Deploy ที่เร็วขึ้น (Faster Deployment Cycles): micro-frontends สามารถ deploy ได้อย่างอิสระ ทำให้มีรอบการทำงานที่เร็วขึ้นและออกฟีเจอร์ใหม่ได้เร็วขึ้น
• ความหลากหลายทางเทคโนโลยี (Technological Diversity): ทีมสามารถเลือกเทคโนโลยีและเฟรมเวิร์กที่เหมาะสมกับความต้องการของตนเองได้ดีที่สุด ซึ่งช่วยส่งเสริมนวัตกรรมและช่วยให้สามารถใช้ทักษะเฉพาะทางได้
• ความเป็นอิสระของทีมที่เพิ่มขึ้น (Enhanced Team Autonomy): micro-frontend แต่ละตัวมีทีมที่รับผิดชอบโดยเฉพาะ ซึ่งส่งเสริมความเป็นเจ้าของและความรับผิดชอบ
• การเริ่มต้นใช้งานที่ง่ายขึ้น (Simplified Onboarding): นักพัฒนาใหม่สามารถเรียนรู้ codebase ที่เล็กกว่าและจัดการได้ง่ายกว่าได้อย่างรวดเร็ว

ความท้าทายของการใช้ Module Federation

• ความซับซ้อนที่เพิ่มขึ้น (Increased Complexity): สถาปัตยกรรม micro-frontend อาจซับซ้อนกว่าสถาปัตยกรรม monolithic แบบดั้งเดิม ซึ่งต้องมีการวางแผนและการประสานงานอย่างรอบคอบ
• การจัดการ Dependency ที่ใช้ร่วมกัน (Shared Dependency Management): การจัดการ dependencies ที่ใช้ร่วมกันอาจเป็นเรื่องท้าทาย โดยเฉพาะอย่างยิ่งเมื่อ micro-frontends ต่างๆ ใช้ไลบรารีเดียวกันในเวอร์ชันที่แตกต่างกัน
• ภาระในการสื่อสาร (Communication Overhead): การสื่อสารระหว่าง micro-frontends อาจทำให้เกิดภาระและเวลาแฝง (latency) เพิ่มขึ้น
• การทดสอบการผสานรวม (Integration Testing): การทดสอบการผสานรวมของ micro-frontends อาจซับซ้อนกว่าการทดสอบแอปพลิเคชัน monolithic
• ภาระในการตั้งค่าเริ่มต้น (Initial Setup Overhead): การกำหนดค่า Module Federation และการตั้งค่าโครงสร้างพื้นฐานเริ่มต้นอาจต้องใช้ความพยายามอย่างมาก

ตัวอย่างและกรณีการใช้งานในโลกแห่งความเป็นจริง

Module Federation กำลังถูกใช้งานโดยบริษัทจำนวนมากขึ้นเรื่อยๆ เพื่อสร้างเว็บแอปพลิเคชันขนาดใหญ่และซับซ้อน นี่คือตัวอย่างและกรณีการใช้งานจริงบางส่วน:

• แพลตฟอร์มอีคอมเมิร์ซ: แพลตฟอร์มอีคอมเมิร์ซขนาดใหญ่มักใช้ micro-frontends เพื่อจัดการส่วนต่างๆ ของเว็บไซต์ เช่น แคตตาล็อกสินค้า ตะกร้าสินค้า และกระบวนการชำระเงิน ตัวอย่างเช่น ผู้ค้าปลีกในเยอรมนีอาจใช้ micro-frontend แยกต่างหากสำหรับแสดงสินค้าเป็นภาษาเยอรมัน ในขณะที่ผู้ค้าปลีกในฝรั่งเศสใช้ micro-frontend อื่นสำหรับสินค้าภาษาฝรั่งเศส โดยทั้งสองผสานรวมเข้ากับแอปพลิเคชัน host เดียวกัน
• สถาบันการเงิน: ธนาคารและสถาบันการเงินใช้ micro-frontends เพื่อสร้างแอปพลิเคชันธนาคารที่ซับซ้อน เช่น พอร์ทัลธนาคารออนไลน์ แพลตฟอร์มการลงทุน และระบบการซื้อขาย ธนาคารระดับโลกอาจมีทีมในประเทศต่างๆ ที่พัฒนา micro-frontends สำหรับภูมิภาคต่างๆ ซึ่งแต่ละทีมปรับให้เข้ากับกฎระเบียบท้องถิ่นและความต้องการของลูกค้า
• ระบบจัดการเนื้อหา (CMS): แพลตฟอร์ม CMS สามารถใช้ micro-frontends เพื่อให้ผู้ใช้สามารถปรับแต่งรูปลักษณ์และฟังก์ชันการทำงานของเว็บไซต์ของตนได้ ตัวอย่างเช่น บริษัทในแคนาดาที่ให้บริการ CMS อาจอนุญาตให้ผู้ใช้เพิ่มหรือลบ micro-frontends (วิดเจ็ต) ต่างๆ ออกจากเว็บไซต์ของตนเพื่อปรับแต่งฟังก์ชันการทำงาน
• แดชบอร์ดและแพลตฟอร์มการวิเคราะห์: micro-frontends เหมาะอย่างยิ่งสำหรับการสร้างแดชบอร์ดและแพลตฟอร์มการวิเคราะห์ ซึ่งทีมต่างๆ สามารถสร้างวิดเจ็ตและการแสดงภาพที่แตกต่างกันได้
• แอปพลิเคชันด้านการดูแลสุขภาพ: ผู้ให้บริการด้านการดูแลสุขภาพใช้ micro-frontends เพื่อสร้างพอร์ทัลผู้ป่วย ระบบเวชระเบียนอิเล็กทรอนิกส์ (EHR) และแพลตฟอร์มการแพทย์ทางไกล

แนวทางปฏิบัติที่ดีที่สุดสำหรับการนำ Module Federation ไปใช้

เพื่อให้แน่ใจว่าการนำ Module Federation ของคุณประสบความสำเร็จ ให้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

• วางแผนอย่างรอบคอบ: ก่อนที่คุณจะเริ่ม ให้วางแผนสถาปัตยกรรม micro-frontend ของคุณอย่างรอบคอบและกำหนดขอบเขตที่ชัดเจนระหว่างแอปพลิเคชันต่างๆ
• สร้างช่องทางการสื่อสารที่ชัดเจน: สร้างช่องทางการสื่อสารที่ชัดเจนระหว่างทีมที่รับผิดชอบ micro-frontends ต่างๆ
• ทำให้การ Deploy เป็นอัตโนมัติ: ทำให้กระบวนการ deploy เป็นอัตโนมัติเพื่อให้แน่ใจว่า micro-frontends สามารถ deploy ได้อย่างรวดเร็วและเชื่อถือได้
• ตรวจสอบประสิทธิภาพ: ตรวจสอบประสิทธิภาพของสถาปัตยกรรม micro-frontend ของคุณเพื่อระบุและแก้ไขปัญหาคอขวด
• ใช้การจัดการข้อผิดพลาดที่แข็งแกร่ง: ใช้การจัดการข้อผิดพลาดที่แข็งแกร่งเพื่อป้องกันความล้มเหลวแบบต่อเนื่องและรับประกันว่าแอปพลิเคชันยังคงมีความยืดหยุ่น
• ใช้รูปแบบโค้ดที่สอดคล้องกัน: บังคับใช้รูปแบบโค้ดที่สอดคล้องกันในทุก micro-frontends เพื่อปรับปรุงความสามารถในการบำรุงรักษา
• จัดทำเอกสารทุกอย่าง: จัดทำเอกสารสถาปัตยกรรม dependencies และโปรโตคอลการสื่อสารของคุณเพื่อให้แน่ใจว่าระบบเป็นที่เข้าใจและบำรุงรักษาได้ดี
• พิจารณาผลกระทบด้านความปลอดภัย: พิจารณาผลกระทบด้านความปลอดภัยของสถาปัตยกรรม micro-frontend ของคุณอย่างรอบคอบและใช้มาตรการความปลอดภัยที่เหมาะสม ตรวจสอบให้แน่ใจว่าได้ปฏิบัติตามกฎระเบียบด้านความเป็นส่วนตัวของข้อมูลทั่วโลก เช่น GDPR และ CCPA

บทสรุป

JavaScript Module Federation กับ Webpack 5 มอบวิธีการที่ทรงพลังและยืดหยุ่นในการสร้างสถาปัตยกรรม micro-frontend โดยการแบ่งแอปพลิเคชันขนาดใหญ่ออกเป็นหน่วยย่อยๆ ที่สามารถ deploy ได้อย่างอิสระ คุณสามารถปรับปรุงการขยายขนาด การบำรุงรักษา และความเป็นอิสระของทีมได้ แม้ว่าจะมีความท้าทายที่เกี่ยวข้องกับการนำ micro-frontends ไปใช้ แต่ประโยชน์ที่ได้มักจะคุ้มค่ากว่า โดยเฉพาะอย่างยิ่งสำหรับเว็บแอปพลิเคชันที่ซับซ้อน โดยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในคู่มือนี้ คุณสามารถใช้ประโยชน์จาก Module Federation ได้สำเร็จเพื่อสร้างสถาปัตยกรรม micro-frontend ที่แข็งแกร่งและขยายขนาดได้ ซึ่งตอบสนองความต้องการขององค์กรและผู้ใช้ทั่วโลกของคุณ