qiankun | BestHub

360 Zhihui Cloud Developer

Jun 9, 2025 · Frontend Development

Choosing the Right Micro‑Frontend Strategy: Qiankun vs Umi Micro vs Iframe

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.

frontend architectureiframemicro-frontend

0 likes · 15 min read

Choosing the Right Micro‑Frontend Strategy: Qiankun vs Umi Micro vs Iframe

Rare Earth Juejin Tech Community

Jun 27, 2024 · Frontend Development

Understanding Micro Frontends: Concepts, Scenarios, and Solution Comparisons

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.

Web Componentsfrontend architectureiframe

0 likes · 26 min read

Understanding Micro Frontends: Concepts, Scenarios, and Solution Comparisons

360 Tech Engineering

Aug 23, 2023 · Frontend Development

Micro‑Frontend Architecture with MonoRepo and Qiankun: Design, Technology Selection, and Implementation Practices

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.

JavaScriptMonorepofrontend architecture

0 likes · 8 min read

Micro‑Frontend Architecture with MonoRepo and Qiankun: Design, Technology Selection, and Implementation Practices

JD Tech

Jun 21, 2023 · Frontend Development

Micro Frontend: Research, Introduction, Capabilities, Core Concepts, Platform Selection, Implementation, and Summary

This article explains the concept of micro frontends, outlines a four‑step adoption process, compares architectural options, describes core capabilities and platforms such as single‑spa, qiankun and micro‑app, and shares practical implementation tips and common pitfalls for large‑scale projects.

JavaScriptcode-splittingfrontend architecture

0 likes · 15 min read

Micro Frontend: Research, Introduction, Capabilities, Core Concepts, Platform Selection, Implementation, and Summary

JD Retail Technology

May 5, 2023 · Frontend Development

Micro Frontend Architecture: Research, Design, and Implementation Guide

This article explains the concept of micro frontends, outlines a systematic research and design process, compares architectural options, and provides detailed implementation steps with code examples using frameworks like single-spa, qiankun, and micro‑app to build scalable, maintainable large‑scale projects.

code-splittingfrontend architecturemicro-app

0 likes · 12 min read

Micro Frontend Architecture: Research, Design, and Implementation Guide

政采云技术

Mar 14, 2023 · Frontend Development

Analysis of Qiankun Micro‑frontend Framework Sandbox Implementations

This article examines the sandbox mechanisms employed by the micro‑frontend framework Qiankun, detailing three implementations—SnapshotSandbox, LegacySandbox, and ProxySandbox—explaining their principles, code structures, advantages, and drawbacks, and illustrating how they isolate JavaScript global state across micro‑applications.

JS Sandboxisolationmicro-frontend

0 likes · 15 min read

Analysis of Qiankun Micro‑frontend Framework Sandbox Implementations

NetEase Media Technology Team

Mar 13, 2023 · Frontend Development

Progressive Upgrade Practice Based on Qiankun Micro-frontend Framework

The article details how a legacy Gulp‑AngularJS project with over 70 modules was progressively upgraded by introducing a new Angular 11 main application and using the qiankun micro‑frontend framework to host the old AngularJS code as a sub‑app, enabling route‑based mounting, menu sharing, CSS isolation, and low‑risk incremental migration.

AngularJs migrationfrontend architecturemicro-frontend

0 likes · 10 min read

Progressive Upgrade Practice Based on Qiankun Micro-frontend Framework

Rare Earth Juejin Tech Community

Feb 24, 2023 · Frontend Development

Integrating Sentry into a qiankun Micro‑Frontend Project

This article provides a step‑by‑step guide on integrating Sentry monitoring into a qiankun micro‑frontend architecture, detailing two implementation schemes, handling source maps, error event routing, sandbox behavior, and code examples for Vue and React sub‑applications.

Error TrackingSentrySource Maps

0 likes · 31 min read

Integrating Sentry into a qiankun Micro‑Frontend Project

Rare Earth Juejin Tech Community

Nov 18, 2022 · Frontend Development

Configuring Sentry Source Maps Release Versions for Qiankun Micro‑Frontend Projects

This article explains how to configure Sentry source map uploads and release versioning for both standard and Qiankun micro‑frontend projects, presenting two methods (webpack plugin and Sentry CLI) and offering fixed and custom release strategies to keep error reporting and source maps in sync.

SentrySource MapsWebpack

0 likes · 9 min read

Configuring Sentry Source Maps Release Versions for Qiankun Micro‑Frontend Projects

DeWu Technology

Oct 14, 2022 · Frontend Development

Micro‑Frontend Architecture with Qiankun: Practical Implementation and Migration Strategies

The article outlines how an enterprise back‑office monolith can be progressively migrated to a Qiankun‑based micro‑frontend architecture—allowing independent Vue, React, Angular or legacy apps, shared SDKs, route isolation, keep‑alive state, and sandboxed styling—resulting in over 90 % legacy integration, a unified React stack for new features, and significantly improved development efficiency and ROI.

UmiVuefrontend architecture

0 likes · 15 min read

Micro‑Frontend Architecture with Qiankun: Practical Implementation and Migration Strategies

Rare Earth Juejin Tech Community

Oct 14, 2022 · Frontend Development

Why Sub‑Application Routes Do Not Update When the Main Application Switches Routes in Qiankun and How to Fix It

This article explains the issue where a Qiankun micro‑frontend main app changes its route but the child app's route does not update, analyzes the underlying cause related to hashchange events, and provides two practical solutions: manually dispatching a hashchange event or replacing Link tags with anchor tags.

HashChangeJavaScriptRouting

0 likes · 12 min read

Why Sub‑Application Routes Do Not Update When the Main Application Switches Routes in Qiankun and How to Fix It

Rare Earth Juejin Tech Community

Oct 12, 2022 · Frontend Development

Implementing a Simple Micro‑Application Loader with Qiankun: Code Walkthrough and Sandbox Isolation

This tutorial demonstrates how to build a lightweight function that loads a micro‑application by fetching its HTML, converting external CSS links to inline styles, applying scoped CSS isolation, executing JavaScript within a snapshot sandbox, and discusses entry‑point handling, isolation limitations, and routing integration.

Frontend DevelopmentJavaScriptSandbox

0 likes · 13 min read

Implementing a Simple Micro‑Application Loader with Qiankun: Code Walkthrough and Sandbox Isolation

Rare Earth Juejin Tech Community

Oct 12, 2022 · Frontend Development

Implementing a Simplified Qiankun JavaScript Sandbox: Snapshot, Singular Proxy, and Multiple Proxy Sandboxes

This article walks through building a lightweight Qiankun JS sandbox by first explaining sandbox principles, then creating a snapshot sandbox, a singular proxy sandbox that records changes via ES6 Proxy, and finally a multiple‑proxy sandbox that isolates each micro‑frontend with its own fake window, complete with test cases and setup instructions.

JavaScriptJestSandbox

0 likes · 16 min read

Implementing a Simplified Qiankun JavaScript Sandbox: Snapshot, Singular Proxy, and Multiple Proxy Sandboxes

Rare Earth Juejin Tech Community

Oct 12, 2022 · Frontend Development

Implementing a CSS Sandbox for Qiankun: Shadow DOM and Scoped CSS Isolation

This article explains how to build a CSS sandbox for Qiankun micro‑frontends by using Shadow DOM for strict style isolation and a Scoped CSS approach for experimental isolation, providing step‑by‑step code examples, underlying principles, and a final Web Component implementation.

CSS sandboxScoped CSSWeb Component

0 likes · 11 min read

Implementing a CSS Sandbox for Qiankun: Shadow DOM and Scoped CSS Isolation

Rare Earth Juejin Tech Community

Oct 8, 2022 · Operations

Complete Solution for Sentry Error and Performance Monitoring in Qiankun Micro‑Frontend Architecture

This article presents a complete solution for routing Sentry error and performance data to the correct micro‑frontend projects in a Qiankun architecture by intercepting transport, redistributing URLs, and distinguishing transaction types, with detailed code examples for both Sentry 6.x and 7.x versions.

JavaScriptObservabilitySentry

0 likes · 10 min read

Complete Solution for Sentry Error and Performance Monitoring in Qiankun Micro‑Frontend Architecture

Rare Earth Juejin Tech Community

Sep 28, 2022 · Frontend Development

Understanding Qiankun Sandbox Mechanisms and JavaScript Isolation

This article explains the three sandbox types used by Qiankun—SnapshotSandbox, LegacySandbox, and ProxySandbox—detailing how they isolate global variables, the underlying code transformation that enables this isolation, common pitfalls with implicit global declarations, and a practical fix using MicroApp's plugin system.

Frontend DevelopmentSandboxjavascript isolation

0 likes · 8 min read

Understanding Qiankun Sandbox Mechanisms and JavaScript Isolation

vivo Internet Technology

Sep 7, 2022 · Frontend Development

Design and Implementation of the Qingtian Micro‑Frontend Framework

The Qingtian framework redesigns VAPD’s monolithic front‑end by employing full‑screen iframes with shared component libraries, asynchronous loading, and synchronized routing and state engines, delivering instant sub‑app switching, complete isolation, and fast page loads while preserving micro‑frontend scalability.

frontend architectureiframe isolationmicro frontends

0 likes · 12 min read

Design and Implementation of the Qingtian Micro‑Frontend Framework

vivo Internet Technology

Jul 27, 2022 · Frontend Development

Multi-Tab Caching Strategies for Micro‑Frontend Applications Using qiankun

The Vivo Internet Front‑End team explains how to implement multi‑tab functionality and efficient caching in a qiankun‑based micro‑frontend architecture, comparing CSS hide/show and component‑level keep‑alive approaches, then presenting two strategies—simultaneous mounting versus app‑level vnode caching—choosing the latter for reduced memory usage and detailing its Vue‑specific implementation, communication handling, and future Vue 3 migration.

CachingVuefrontend

0 likes · 17 min read

Multi-Tab Caching Strategies for Micro‑Frontend Applications Using qiankun

DeWu Technology

May 23, 2022 · Frontend Development

Micro‑Frontend Architecture with Qiankun and Module Federation: Design, Implementation, and Performance

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.

PerformanceVuefrontend

0 likes · 19 min read

Micro‑Frontend Architecture with Qiankun and Module Federation: Design, Implementation, and Performance

vivo Internet Technology

Mar 23, 2022 · Frontend Development

Product Middle Platform Front-end Practice: Micro-frontend Architecture and Visualization Technology Implementation

The article details how an e‑commerce product middle platform’s front‑end employs visualization technology, a uni‑render approach that shares a Vuex store between an iframe and its parent via a sandboxed Vue instance, and a qiankun‑based micro‑frontend architecture, while addressing cross‑domain and editor integration challenges.

Vuexe-commercefrontend architecture

0 likes · 13 min read

Product Middle Platform Front-end Practice: Micro-frontend Architecture and Visualization Technology Implementation