0 views collected around this technical thread.
Learn how to implement Webpack’s Module Federation using Vite and Vue, covering core concepts, advantages over traditional micro‑frontend solutions, detailed setup steps, code examples, and common pitfalls such as dependency conflicts and version mismatches.
This article explains how to build a decentralized micro‑frontend system for Vue 3 using the Vite‑based @originjs/vite-plugin-federation, covering architecture concepts, configuration, dynamic module loading, shared routing, state management with Pinia, and deployment strategies, complete with code examples.
This article explains what micro frontends are, the problems they address, suitable application scenarios, key technical concerns such as communication, state management, sandboxing, routing, and pre‑loading, and compares popular implementations like nginx forwarding, pure iframe, qiankun, micro‑app, Module Federation, and wujie.
Module Federation 2.0, released by ByteDance Web Infra and the original author, introduces best‑practice documentation, runtime‑tool decoupling, TypeScript type safety, a devtool, manifest protocol, and cross‑tool support to make micro‑frontend module sharing more flexible and developer‑friendly.
This article describes the design, implementation, and benefits of a low‑intrusion micro‑module framework that enables cross‑stack code reuse, dynamic loading, fast deployment, and robust monitoring for large‑scale front‑end applications, while addressing challenges such as React version compatibility and incremental packaging.
The DeWu customer service ticket frontend was re‑architected by aggregating APIs, splitting fast and slow interfaces, adopting Module Federation, implementing a single‑instance design and schema‑driven dynamic rendering, which cut render times from seconds to sub‑second, reduced memory usage, eliminated TypeScript bugs and boosted 客服 satisfaction to 80 %.
This article introduces the concept and motivation behind Webpack's Module Federation, explains host and remote roles, outlines practical use cases such as micro‑frontend architecture and resource sharing, and provides a step‑by‑step code walkthrough—including configuration, shared dependencies, and runtime loading—to help developers quickly adopt this decentralized module‑sharing technique.
This article explains how a growing React‑based admin panel was split into independent micro‑frontends using Webpack Module Federation, covering the background, reasons for choosing federation, three integration patterns, step‑by‑step setup, routing, shared state, hot‑reload, deployment considerations and practical code examples.
Micro frontends decompose large monolithic front‑end applications into independent, technology‑agnostic sub‑apps, detailing their background, advantages, suitable scenarios, and various implementation approaches—including MPA, server‑side composition, build‑time and runtime composition with module federation, iframe, JS sandbox, CSS isolation, and routing techniques.
This collection highlights recent developments and insightful articles on Vite 3.0, low‑code platform design, data source management, Svelte's innovative concepts, functional programming, SOLID principles in React, module federation, front‑end monitoring techniques, and CSS‑based particle animations, providing concise overviews and links for deeper exploration.
This comprehensive frontend development digest explores the evolution of JavaScript frameworks, introduces WebAuth for secure authentication, details browser rendering principles and performance optimization, examines ES2022 features and Module Federation, and provides practical insights into web image handling and live streaming protocols.
This article introduces Webpack 5's Module Federation feature, explains its business scenarios, configuration, underlying plugin architecture, and runtime mechanics, provides a practical Vue 3 demo with code snippets, and discusses usage patterns and benefits for micro‑frontend development.
The team replaced a heavy SPA‑plus‑iframe workbench with a micro‑frontend architecture using Qiankun and Webpack 5 Module Federation, enabling independent development, caching, sandboxed isolation, and remote component integration, which cut load time, improved stability, and accelerated releases while highlighting migration challenges.
This article provides a comprehensive introduction to micro frontends, explaining their definition, benefits such as independence and scalability, detailing various implementation approaches like iframe, Module Federation, EMP, single‑spa, qiankun, icestark, garfish, Fronts and Web Components, and outlining the essential framework functions and suitable scenarios.
This comprehensive guide explains micro‑frontend concepts, the core principles of independent development, deployment and runtime, compares various implementation options, and provides detailed step‑by‑step instructions for using Qiankun—including registration, lifecycle hooks, routing strategies, sandbox isolation, CSS scoping, resource sharing, inter‑app communication, memory management, and deployment workflows—targeted at modern frontend engineers.
Micro‑frontend architecture breaks a monolithic web app into independent, stack‑agnostic sub‑applications that can be developed, deployed, and maintained separately, using techniques such as server‑side or runtime integration and tools like single‑spa, qiankun, or Webpack 5 Module Federation, with qiankun favored for production.
Adopt micro frontends when large, parallel development teams need independent releases, cross‑technology migration, or high‑frequency updates, and design them with a central app shell loading shared dependencies, choosing between iframe, web component, or lifecycle‑hook bundles, managing single‑ or multi‑instance routing, shared state or event‑bus communication, and optimizing performance through lazy rendering and shared library bundling.
This article provides a comprehensive overview of micro‑frontend concepts, typical system components, governance and development tooling, runtime container responsibilities, various sandbox isolation techniques (including snapshot, Proxy, iframe, Realms, and Shadow DOM), and practical considerations such as technical debt and migration strategies.
This article provides an in‑depth technical analysis of Webpack's runtime, explaining how bundles are composed of business code and runtime, the generation of __webpack_require__ helpers, the mechanisms behind asynchronous chunk loading, hot module replacement, and the internal dependency‑collection process that drives the final asset emission.
The article introduces Bifrost, Meituan’s Vue‑based micro‑frontend framework, detailing its background, design goals, architecture, implementation code, development practices, deployment workflow, and the benefits and challenges of adopting micro‑frontend architecture in large‑scale enterprise front‑end projects.