Frontend Academy · บทเรียน

ไมโครฟรอนต์เอนด์: Module Federation

ใช้ Webpack Module Federation หรือ Vite Federation แยกฟรอนต์เอนด์ขนาดใหญ่ออกเป็นรีโมตที่นำไปใช้งานแยกกันได้และให้แอปเชลล์เรียกใช้

ไมโครฟรอนต์เอนด์: Module Federation เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

ไมโครฟรอนต์เอนด์คืออะไร

การแบ่งฟรอนต์เอนด์ขนาดใหญ่ออกเป็นส่วนย่อยที่พัฒนาและนำไปใช้งานได้อย่างอิสระ โดยทั่วไปจะแบ่งหนึ่งส่วนต่อหนึ่งทีมหรือหนึ่งโดเมนธุรกิจ แต่ละส่วนอาจใช้เฟรมเวิร์ก รีโป กระบวนการนำไปใช้งาน หรือแม้แต่เทคโนโลยีสแตกของตนเอง แอปเชลล์จะเชื่อมส่วนต่าง ๆ เข้าด้วยกันขณะรันไทม์

ทำไมต้องใช้ไมโครฟรอนต์เอนด์

องค์กรที่มีทีมฟรอนต์เอนด์มากกว่า 10 ทีมจะเริ่มพบข้อจำกัด เช่น คอขวดจากรีโปเดียว เวลาบิลด์ที่นาน และกำหนดการรีลีสที่ขัดแย้งกัน ไมโครฟรอนต์เอนด์ช่วยให้ทีมส่งมอบงานได้อย่างอิสระ แต่ต้องแลกกับความซับซ้อนด้านสถาปัตยกรรมที่เพิ่มขึ้น

Module Federation — เทคนิคหลัก

Webpack Module Federation (Webpack 5 และ Vite ผ่านปลั๊กอิน) ช่วยให้แอปเชลล์นำเข้าโค้ดจากรีโมตที่นำไปใช้งานแยกกันได้ในขณะรันไทม์ รีโมตจะเปิดเผยโมดูลที่ระบุไว้ ส่วนเชลล์จะเรียกใช้โมดูลเหล่านั้น

การกำหนดค่ารีโมต

แอปรีโมตจะเปิดเผยโมดูลผ่านการกำหนดค่า webpack

// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  output: { publicPath: 'https://product-team.example.com/' },
  plugins: [
    new ModuleFederationPlugin({
      name: 'productApp',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductPage': './src/ProductPage',
        './productClient': './src/api/client'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

การกำหนดค่าเชลล์ (โฮสต์)

เชลล์จะประกาศว่าให้นำเข้ารีโมตใดบ้าง

// shell app: webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        product: 'productApp@https://product-team.example.com/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

การนำเข้าโมดูลรีโมต

ใช้การนำเข้าแบบไดนามิก — webpack จะค้นหาโมดูลผ่านรันไทม์ของ federation

// shell src/App.tsx
import { lazy, Suspense } from 'react';

const ProductPage = lazy(() => import('product/ProductPage'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <ProductPage />
    </Suspense>
  );
}

Vite Federation

Vite รองรับ Module Federation ผ่านปลั๊กอิน @originjs/vite-plugin-federation ซึ่งมี API คล้ายกัน

// vite.config.ts
import federation from '@originjs/vite-plugin-federation';

export default {
  plugins: [federation({
    name: 'shell',
    remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
    shared: ['react', 'react-dom']
  })]
};

การขึ้นต่อกันที่ใช้ร่วมกัน

ระบุไลบรารีอย่าง React ใน shared เพื่อไม่ให้ถูกบันเดิลซ้ำสองครั้ง รันไทม์ของ federation จะเลือกเวอร์ชันที่เข้ากันได้สูงสุดขณะรันไทม์

การนำไปใช้งานอย่างอิสระ

รีโมตแต่ละตัวมีการบิลด์และกระบวนการนำไปใช้งานเป็นของตนเอง เชลล์จะชี้ไปยัง URL หนึ่ง เมื่อส่งรีโมตเวอร์ชันใหม่ไปใช้งาน ระบบจะเผยแพร่เวอร์ชันนั้นแก่ผู้ใช้ทั้งหมดโดยอัตโนมัติ

การสื่อสารระหว่างแอป

อย่าแชร์สถานะผ่านการนำเข้าโดยตรง ให้ใช้เหตุการณ์ (CustomEvent) บัสร่วมขนาดเล็ก หรือ postMessage ควรรักษาขอบเขตให้ชัดเจนเพื่อคงความเป็นอิสระของแต่ละส่วน

ทางเลือก: iframe และ Web Components

iframe: แยกส่วนได้แน่นหนาที่สุด แต่การนำทางและ CSS ใช้งานไม่สะดวก Web Components: เบราว์เซอร์รองรับโดยกำเนิด ไม่ผูกติดกับเฟรมเวิร์ก แต่การใช้สถานะร่วมกันมีข้อจำกัด Module Federation สร้างสมดุลระหว่างการแยกส่วนกับประสบการณ์ของนักพัฒนา

ข้อแลกเปลี่ยน

ข้อดี: ปรับใช้แยกจากกันได้ มีอิสระในการเลือกเทคโนโลยี ทีมมีอิสระในการทำงาน ข้อเสีย: การตั้งค่าการสร้างซับซ้อน ความขัดแย้งของการพึ่งพาที่ใช้ร่วมกัน ข้อผิดพลาดขณะทำงานแก้ไขได้ยาก และชุดรวมมีความซับซ้อนมากขึ้น คุ้มค่าเฉพาะองค์กรที่มีขนาดใหญ่จริง ๆ

เมื่อใดควรหลีกเลี่ยง

โครงการที่มีทีมเดียว โครงการ MVP และไซต์ที่มีพนักงานด้านส่วนหน้าน้อยกว่า 100 คน ต้นทุนจากความซับซ้อนมีอยู่จริง — ทีมส่วนใหญ่ควรใช้โมโนรีโปแทน

ตรวจสอบความเข้าใจอย่างรวดเร็ว

Webpack Module Federation ช่วยให้ทำสิ่งใดได้ในสถาปัตยกรรมไมโครฟรอนต์เอนด์

สรุป: ไมโครฟรอนต์เอนด์

แบ่งส่วนหน้าตามทีม หรือโดเมนธุรกิจ เพื่อให้ปรับใช้แยกจากกันได้ Module Federation (ปลั๊กอิน webpack 5 / Vite) — เชลล์นำเข้าโมดูลจากรีโมตขณะทำงาน รีโมตเปิดเผยโมดูล ส่วนเชลล์ประกาศรีโมต ทั้งสองฝ่ายใช้การพึ่งพาร่วมกัน เช่น react ใช้เหตุการณ์สำหรับการสื่อสารข้ามแอป มีความซับซ้อน — ควรใช้เฉพาะกับองค์กรที่มีขนาดใหญ่จริง ๆ

คำถามที่พบบ่อย

บทเรียน “ไมโครฟรอนต์เอนด์: Module Federation” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ไมโครฟรอนต์เอนด์: Module Federation” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ไมโครฟรอนต์เอนด์: Module Federation”

ใช้ Webpack Module Federation หรือ Vite Federation แยกฟรอนต์เอนด์ขนาดใหญ่ออกเป็นรีโมตที่นำไปใช้งานแยกกันได้และให้แอปเชลล์เรียกใช้ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ไมโครฟรอนต์เอนด์: Module Federation” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การออกแบบแบบอะตอมิก: อะตอม โมเลกุล ออร์แกนิซึม
การตั้งค่าโมโนรีโพด้วย Turborepo
ไมโครฟรอนต์เอนด์: Module Federation
โครงสร้างโฟลเดอร์ตามฟีเจอร์

← กลับไปที่ Frontend Academy