1 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 compares two micro‑frontend frameworks (Qiankun and Umi Micro) and an iframe‑based solution, detailing their principles, feature comparisons, pros and cons, integration costs, typical scenarios, common pitfalls, and improvement plans to help developers select the most suitable approach for multi‑platform product integration.
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 recounts the architectural challenges of the Xingyun 2.0 frontend platform, explains why its monolithic codebase and build process became unsustainable, and details the step‑by‑step migration to a modular monorepo with micro‑frontend, Nx, pnpm, and Tailwind to improve scalability, maintainability, and developer productivity.
This article explains how to reduce bundle size and improve load speed of large micro‑frontend projects by sharing common dependencies through CDN externalization, using tools such as qiankun, vite‑plugin‑cdn‑import, and Rollup plugins for HTML generation.
During development of a micro‑frontend project using wujie, the child app required port 5173 for communication, but newly created Vite React‑TS projects failed to auto‑increment the port, revealing that Vite’s port‑detection logic also depends on the host setting, not just the port number.
This article details a practical implementation of the Wujie micro‑frontend framework across three Vue‑based management systems, covering preparation of the host app, login state handling, layout selection, event bus integration, network request management, UI adjustments, and shared state synchronization, with code snippets and lessons learned.
This article documents several practical problems encountered when using the Wujie micro‑frontend framework—such as editor selection failures, PDF preview white screens, missing Element‑Plus styles, tooltip offsets, custom event loss, and global style pollution—and provides concrete reproduction steps and detailed solutions for each.
To meet soaring marketing‑tool demand with limited front‑end staff, the team built a three‑layer, micro‑frontend architecture—page container, scenario template, and business customization—augmented by a plugin‑style micro‑kernel, enabling over 50 % faster development, consistent UI, and configurable blocks, while acknowledging added complexity and performance trade‑offs.
The article describes how a monolithic supply‑chain front‑end was refactored into a micro‑frontend architecture based on Single‑SPA, detailing the background problems, requirements, technical selection, system design, service discovery, module loading, message bus, data sharing, build and deployment, and the resulting performance improvements.
2024 brings rapid AI advances and evolving front‑end technologies, urging developers to adopt TypeScript, master micro‑frontend architectures, embrace server‑side rendering with Next.js, reconsider low‑code and Flutter, and explore full‑stack frameworks, while providing curated resources and insights for staying competitive.
This article explains the micro‑frontend pattern, introduces the MicroApp framework, outlines when to adopt micro‑frontends, compares existing solutions, and provides a step‑by‑step guide for building a React‑based micro‑frontend base with code examples, cross‑origin handling, proxy configuration, and data communication.
This article describes how a legacy data‑platform was refactored using a micro‑frontend architecture with Micro‑App, detailed design of main and sub applications, permission handling, routing, build tooling, and a Turborepo‑based monorepo strategy to improve development efficiency and deployment speed.
A Chrome proxy plugin was built to intercept micro‑frontend requests and map online URLs to local development servers, eliminating the need to launch both parent and child apps, restoring hot‑module replacement speed, offering one‑click rule configuration, and achieving full coverage and faster development for DeWu’s team.
NetEase Cloud Music’s mid‑platform frontend team tackled fragmented product lines and low throughput by standardizing metadata, revamping cross‑team workflows, introducing bi‑weekly reviews, adopting a hybrid micro‑frontend architecture, and building reusable low‑code components and backend code‑generation tools, which doubled demand throughput while highlighting template benefits and remaining asset gaps.
This article explains why front‑end teams should invest in technical infrastructure—covering fundamentals such as documentation, standards, scaffolding, component libraries, tooling, CI/CD, data monitoring, and micro‑frontend approaches—to improve efficiency, reduce blockers, and support future business growth.
This article explains how to combine Monorepo and micro‑frontend architectures using pnpm and Micro‑App, covering the concepts, technical selections, step‑by‑step setup of base and child applications, shared modules, configuration, code standards, mock services, Docker/Nginx deployment, and best practices for frontend development.
This article explains the micro‑frontend concept, outlines when it is appropriate to adopt, compares popular frameworks, and provides a detailed tutorial—including code snippets—for creating a React‑based micro‑frontend base (host) application using the micro‑app library.
This article describes how a team consolidated six PC and H5 projects by adopting a micro‑frontend architecture based on MonoRepo and Qiankun, evaluates popular micro‑frontend solutions, explains the chosen technology stack, outlines step‑by‑step implementation details, and shares the problems encountered and their resolutions.
The article explores the motivations behind mini programs, micro‑frontends, and module loading, comparing their technical advantages, business implications, and ecosystem challenges while questioning whether these solutions truly address core problems or merely serve as market‑driven silver bullets.