Vue Academy · Pelajaran

Module Federation Webpack dengan Vue

ModuleFederationPlugin, exposes, remotes, dependensi bersama, serta pemuatan komponen remote.

Module Federation Webpack dengan Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Federasi Modul di Webpack

Webpack 5 sudah menyertakan Federasi Modul. Fitur ini memungkinkan suatu proses pembangunan mengekspos modul kepada proses pembangunan lain dan menggunakan modul darinya saat aplikasi berjalan—dasar bagi mikro-frontend yang berjalan secara dinamis.

Aplikasi Induk dan Modul Jarak Jauh

Ada dua peran: sebuah modul jarak jauh mengekspos komponen, sedangkan aplikasi induk menggunakannya. Sebuah aplikasi dapat menjalankan kedua peran tersebut. Aplikasi induk memuat kode modul jarak jauh melalui HTTP saat aplikasi berjalan, bukan saat pembangunan.

ModuleFederationPlugin

Anda mengonfigurasi federasi dengan menambahkan ModuleFederationPlugin ke larik plugins webpack. Opsinya menentukan nama, hal-hal yang diekspos, hal-hal yang digunakan, dan dependensi bersama.

const { ModuleFederationPlugin } = require("webpack").container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "checkout",
    }),
  ],
}

Opsi name

name adalah pengenal global unik untuk proses pembangunan ini. Aplikasi induk merujuk modul jarak jauh berdasarkan nama ini.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
})

Opsi exposes (Modul Jarak Jauh)

Modul jarak jauh mencantumkan modul yang dibagikannya dalam exposes. Kuncinya adalah jalur publik, sedangkan nilainya adalah jalur berkas lokal.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
  exposes: {
    "./CartButton": "./src/components/CartButton.vue",
  },
})

Manifes remoteEntry

Modul jarak jauh membangun manifes remoteEntry.js yang menjelaskan modul-modul yang dieksposnya. Aplikasi induk memuat berkas ini untuk menemukan dan mengambil kode modul jarak jauh saat aplikasi berjalan.

// host loads: https://checkout.example.com/remoteEntry.js

Opsi remotes (Aplikasi Induk)

Aplikasi induk menyatakan modul jarak jauh yang digunakannya dalam remotes, dengan memetakan alias lokal ke nama modul jarak jauh beserta URL remoteEntry.js-nya.

new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    checkout: "checkout@https://checkout.example.com/remoteEntry.js",
  },
})

Opsi shared

shared mencantumkan dependensi yang seharusnya digunakan bersama oleh kedua sisi agar tidak memuat dua salinan. Untuk kerangka kerja seperti Vue, Anda harus membagikannya agar semua mikro-frontend menggunakan satu instans.

new ModuleFederationPlugin({
  name: "shell",
  remotes: { /* ... */ },
  shared: ["vue"],
})

singleton: true untuk Vue

Vue harus menjadi singleton—tepat satu salinan di halaman. Dua instans Vue akan merusak reaktivitas dan identitas komponen. Tandai sebagai singleton dengan persyaratan versi.

shared: {
  vue: {
    singleton: true,
    requiredVersion: "^3.4.0",
  },
}

Menggunakan Komponen Modul Jarak Jauh

Impor modul jarak jauh secara dinamis saat aplikasi berjalan. Karena modul tersebut dimuat melalui jaringan, gunakan import() dinamis—biasanya dibungkus dalam defineAsyncComponent di Vue.

import { defineAsyncComponent } from "vue"

const CartButton = defineAsyncComponent(() =>
  import("checkout/CartButton")
)

Merender Modul Jarak Jauh

Gunakan komponen asinkron seperti komponen lainnya dalam templat Anda. Webpack mengambil kode modul jarak jauh saat perenderan pertama dan menyimpannya dalam tembolok.

<template>
  <header>
    <CartButton />
  </header>
</template>

Pemeriksaan Singkat

Periksa pemahaman Anda tentang Federasi Modul dengan Vue.

Rangkuman

Anda telah mempelajari Federasi Modul Webpack:

ModuleFederationPlugin mengonfigurasi federasi; name mengidentifikasi proses pembangunan.
Modul jarak jauh mencantumkan exposes dan menghasilkan manifes remoteEntry.js.
Aplikasi induk mencantumkan remotes yang memetakan alias ke name@URL/remoteEntry.js.
shared mencegah duplikasi dependensi; Vue memerlukan singleton: true.
Gunakan modul jarak jauh melalui import("remote/Module") dinamis, sering kali dengan defineAsyncComponent.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Module Federation Webpack dengan Vue” gratis?

Ya — teks lengkap “Module Federation Webpack dengan Vue” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Module Federation Webpack dengan Vue”?

ModuleFederationPlugin, exposes, remotes, dependensi bersama, serta pemuatan komponen remote. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Module Federation Webpack dengan Vue” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy