tag 微前端

標籤
貢獻18
88
04:32 AM · Nov 04 ,2025
jdcdevloper 頭像 grewer 頭像 wbccb 頭像 smallhuifei 頭像 opentiny 頭像 dewujishu 頭像 zhengcaiyunqianduantuandui 頭像 yuzhenyou 頭像 gegezz 頭像 linwu_64a6a252159bc 頭像 puffer 頭像 steven_code 頭像

@微前端 / 博客 RSS 訂閱

smallhuifei 頭像

smallStone - 無界微前端環境不能加載svg，導致圖標丟失問題解決

在無界微前端環境下，svg圖標偶爾會加載不到。或者説是第一次能加載， 後面再打開同樣得頁面就加載不到了。這種問題我們通過plugins來解決！ { plugins: [{ // element 為真正插入的元素，iframeWindow 為子應用的 window, rawElement為原始插入元素 appendOrInsertElementHook(element

微前端

收藏 評論

smallhuifei 頭像

smallStone - 微前端下element-ui等前端UI框架彈框偏移問題解決

本章1~6主要是解決無界微前端環境下element-ui彈框偏移問題，如果你用的是其他微前端框架，且提供了jsloader這種預處理器，則可以舉一反三解決同樣的問題。 7後面的內容可以通用react、vue、anglar，大家都可以嘗試嘗試，建議先用插件形式試試看，因為插件可以解決所有UI框架的偏移問題 如果不想看我廢話，請直接移步到5看代碼和後面的效果圖【此方法已經廢棄，因為官網更新了源碼。現在

微前端 , element-ui

收藏 評論

steven_code 頭像

Steven - 微前端的靠譜實現方案 —— iframe

一年多之前，為了能在老舊的 Vue 項目中開發 React 頁面，特地調研了一些主流的微前端框架：qiankun、無界等等。但都發現其實現的方案無法擺脱 JavaScript 的限制，不是 100%的將多個框架分離開，實施過程中，坑太多。於是採用了iframe這個天然的沙箱，將多個框架 100%分離開。從現在的角度來看，這個技術選型依然是正確的。接下來，詳細介紹一下iframe。 介紹 ifram

iframe , 瀏覽器原理 , 微前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 【京東開源項目】微前端框架MicroApp 1.0正式發佈

介紹 MicroApp是由京東前端團隊推出的一款微前端框架，它從組件化的思維，基於類WebComponent進行微前端的渲染，旨在降低上手難度、提升工作效率。MicroApp無關技術棧，也不和業務綁定，可以用於任何前端框架。 源碼地址： https://github.com/micro-zoe/micro-app 官網地址： https://micro-zoe.github.io/micro

react , 微前端 , 開源項目介紹 , 前端 , Javascript

收藏 評論

wbccb 頭像

白邊 - 【微前端】qiankun v2.10.16（流程圖）源碼解析

整體核心流程 源碼分析 single-spa 存在以下主要的缺點 路由狀態管理不足：無法保持路由狀態，頁面刷新後路由狀態丟失 父子應用間的路由交互以來 postMessage 等方式，開發體驗差 未提供原生的 CSS 和 JS 沙箱隔離，可能導致樣式污染或者全局變量衝突 默認以來 webpack 的構建配置，其他構建工具需要改造後才能兼容 版本兼容性差，如果使用不同的 Vue 版本，

源碼分析 , 微前端 , 前端

收藏 評論

wbccb 頭像

白邊 - 【微前端】singleSpa&importHTMLEntry（流程圖）源碼解析

single-spa v5.9.3 通過輕量級路由劫持和狀態機設計，實現微前端的動態加載與隔離，主要實現 路由管理：hashchange、popstate、history.pushState、history.replaceState進行劫持，路由變化時，觸發 reroute() 子應用狀態管理：不同執行邏輯轉化不同的狀態，比如 加載流程：toLoadPromise→toBo

源碼分析 , 微前端 , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 你想要的【微前端】都在這裏了！ | 京東雲技術團隊

作者：京東零售 鄭炳懿 開篇： 如果你不知道微前端是什麼，或者不知道微前端能解決什麼問題，那麼你可能不需要微前端。 在我看來，對於每一個沒有使用過的新技術，都應該有以下幾個過程： 1、調研該技術，產出相應的調研文檔。 2、輸出技術Demo，基本的框架結構。 3、試着在項目中使用它，這一步坑會很多。 4、把它推動到線上完成真正的技術升級。 一、調研微前端 1.1 業務背景 某次遇到一個從0到1的大型

singlepage , 前端工程師 , 微前端 , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 微前端框架single-spa子應用加載解析

作者：京東物流 寧衝 1 前言 什麼是微前端？ 微前端是指存在於瀏覽器中的微服務。 本文主要通過對微前端框架single-spa的基座應用加載子應用的single-spa-vue函數庫進行分析，通過代碼維度分析讓大家瞭解在single-spa加載子應用的時候都做了哪些事情。如何通過優化single-spa-vue函數庫保持子應用的狀態。 由於是在代碼維度進行分析，要求讀者對single-sp

微前端 , 程序員 , spa , 前端 , Javascript

收藏 評論

tosmile 頭像

浪遏飛舟 - single-spa-react搭建微前端單實例應用

單實例微前端設計思想 拿到子應用構建後的資源清單，一般項目中都會生成一個asset-manifest.json文件，用來記錄各個子應用的入口資源url信息，以便在切換不同子應用時使用模塊加載器去遠程加載。因為每次子應用更新後入口資源的hash通常會變化，所以需要服務端定時去更新該配置表，以便框架能及時加載子應用最新的資源； 同樣，子應用之間的一些公共依賴通過配置文件記錄； 主應用監聽路由

react , micro , single-page-application , 微前端 , spa

收藏 評論

jibvxiz 頭像

吉古力 - 微前端是什麼，可以帶來什麼收益

轉自掘金原文《微前端究竟是什麼，可以帶來什麼收益》 本文將講解微前端誕生的背景，詳細解説微前端概念的緣由以及其深入理解，讀完本文，相信你對微前端有一個比較全面的認知，明白它可以解決您團隊以及整個企業什麼問題，帶來怎麼樣的收益。 一.背景 現在很多企業，基本在物理上進行了應用代碼隔離，實行單個應用單個庫，閉環部署更新測試環境、預發佈環境和正式環境。於是，我們的探討的是，基於不同應用不同庫並獨立部署的

前端框架 , 前端優化 , 前端設計 , 微前端 , Javascript

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 淺入深出的微前端MicroApp | 京東雲技術團隊

前言： 本文是由最近做的一個項目有感而發，因為之前做了一些技術棧的統一，為了用ant Design的pro-table，PC統一使用react，但是我們有一些老的項目是vue的，本次新頁面較多，老頁面的改動較少，除此之外老項目想換菜單，因此我們想借助本次機會用react開發，經過了幾番思考，發現本次很適合用微前端來完成本次需求，最終決定用react搭建一個基座（主應用），將原來的vue項目接入到基

react , micro , 微前端 , 前端

收藏 評論

hiisea 頭像

hiisea - Elux-從"微前端"到“微模塊”

前言：作為“前端微模塊”這個概念有點新，之前雖然也有人提過這個詞（可百度），但都只是簡單的將其等同於動態加載模塊，並沒有賦予其更大的意義，好像也沒有看到具體的落地方案。小弟也是突發奇想，摸着石頭過河，想和大家討論一下“前端微模塊”會不會成為一片廣闊的天空？ 微前端夠用嗎？ 從產品的角度 某個大型應用包含A,B,C,D,E,F,G等若干功能，原來一直是整體打包出售... 隨着用户需求的多樣化，有的用

前端架構 , 前端框架 , 微前端 , typescript , 前端

收藏 評論

grewer 頭像

Grewer - 淺析微前端框架 qiankun 的實現

微前端簡介 Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends 前端是一種多個團隊通過獨立發佈功能的方式來共同構建現代化 web 應用的技術手段及方法策略。 在

qiankun , 微前端 , 前端 , Javascript

收藏 評論

grewer 頭像

Grewer - qiankun 中遇見的問題集合

本文中的微前端基於 qiankun 框架 多個子應用共存 如果需要多個子應用同時共存，在管理就有很多例子： https://qiankun.umijs.org/zh/faq#%E5%A6%82%E4%BD%95%E5%90%8C%... registerMicroApps([ // 自定義 activeRule { name: 'reactApp', entry: '//localhost

qiankun , 微前端 , 前端 , Javascript

收藏 評論

fangsz 頭像

方始終 - 使用wujie(無界)微前端過程中的e.target指向問題修復

緣起 微前端的方案很多，大體上調研階段躲不過qiankun, wujie, single-spa這些。 如果你使用的是無界，那麼在使用子應用的時候會發現事件回調函數的e.target指向發生了變化，導致你原先的從e.target.value取值的方式無法讀取到表單的值，或者setTimeout的回調函數執行會出現一些詭異的現象。 官方解釋 對於這種現象官方的文檔也做了解釋，官方歸咎於瀏覽器原生的處

微前端 , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 微前端無界機制淺析 | 京東物流技術團隊

簡介 隨着項目的發展，前端SPA應用的規模不斷加大、業務代碼耦合、編譯慢，導致日常的維護難度日益增加。同時前端技術的發展迅猛，導致功能擴展吃力，重構成本高，穩定性低。 為了能夠將前端模塊解耦，通過相關技術調研，最終選擇了無界微前端框架作為物流客服系統解耦支持。為了更好的使用無界微前端框架，我們對其運行機制進行了相關了解，以下是對無界運行機制的一些認識。 基本用法 主應用配置 import Wuji

微前端 , 前端 , Javascript

收藏 評論

xunguang_63df81bc527a3 頭像

尋光 - 微前端框架StartCMS， 一個基於微前端架構的極速微應用開發框架，開源框架

一、介紹 StartCMS是一個基於ThinkPHP6.0+、ElementUI、MicroApp的極速微應用開發框架 前端不限技術棧，支持Vue2、Vue3、Vite、React、Rangular... 後端不限制語言，支持PHP、Java、Node、Python、Go、C#... 二、主要特性 大道至簡：後端標準CMS分層設計，前端微應用架構，全新開發模式和開發規範給開發更好

vue.js , 前端架構 , 前端框架 , 微前端 , 前端

收藏 評論

valleykid 頭像

valleykid - 手把手教你定製一套適合團隊的微前端體系

編者按：大家在使用目前市面上的微前端解決方案時，可能會有些顧慮。比如遇到框架自身的問題和坑點，影響了業務進度怎麼辦？現在有這麼一款框架 Satum，可以像 express/koa 框架一樣提供中間件機制，其只負責核心的功能(規則計算和微應用加載/卸載)。可以基於該框架定製一套適合團隊自身業務的微前端體系，另外該框架還有更多特性，如面向多實例集成、適配多終端等。 寫在前面 隨着前端工程複雜度逐漸增加

前端架構 , 微前端 , 前端

收藏 評論

puffer 頭像

河豚學前端 - 微前端選擇qiankun還是iframe？

前言 微前端是什麼？微前端是一種架構模式，將整個應用拆分成多個獨立的模塊，這些模塊可以獨立開發、部署。我在業務中遇到的2次都是先開發了多個小項目，然後這些小項目在業務上有一定的聯繫，都屬於同一類，產品就希望可以聚合成一個大項目，有一個統一的入口。 技術選型 技術選型大概有2種，一種是使用框架，比如qiankun、無界等，一種是使用iframe引入子項目。那如何選擇適合自己項目的方案呢？這2種我都用

iframe , 微前端 , 前端

收藏 評論

linwu_64a6a252159bc 頭像

linwu - 作為面試官，為什麼我推薦微前端作為前端面試的亮點？

點擊在線閲讀，體驗更好 鏈接 現代JavaScript高級小冊 鏈接 深入淺出Dart 鏈接 現代TypeScript高級小冊 鏈接 前段時間陸續面試了一波候選人，其中提到最多的就是微前端方案，微前端不像前端框架的面試題那樣，它更偏重於項目實戰，更加考察候選人的技術水平，不像Reac

react , vue.js , 微前端 , typescript , Javascript

收藏 評論

grewer 頭像

Grewer - 淺析微前端沙箱

前言 在大型項目中，微前端是一種常見的優化手段，本文就微前端中沙箱的機制及原理，作一下講解。 首先什麼是微前端 Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends

iframe , qiankun , 微前端 , 前端 , Javascript

收藏 評論

gegezz 頭像

GeGeZZ - uniapp作為乾坤子應用配置

uniapp作為乾坤子應用配置 項目背景： 新人入職接手老項目，該項目是利用uniapp框架開發，主要是兼容web和微信小程序。近日收到新的需求，要將web端嵌入甲方的主應用。 技術棧 主應用框架umi ;主應用打包方式hash 子應用框架uniapp,vue2的寫法，老項目是hbuilder創建的應用，子應用打包方式hash 注：u

qiankun , umi , hash , uniapp , 微前端

收藏 評論

yuzhenyou 頭像

yuzhenyou - qiankun乾坤微前端，使用vue從零搭建完整示例

前言 最近正在開發項目，正好用的qiankun搭建的框架，找時間從新開始搭建了一個示例項目，研究了一下基礎應用，分享一下附上代碼地址，希望對大家有幫助，有問題可以留言交流 項目github地址： https://github.com/yuzhenyou/qiankun qiankun乾坤微前端示例 項目説明 主應用和子應用都是通過Vue-cli工具構建，vue2版本項目 qiankun-mai

qiankun , 微前端

收藏 評論

zhengcaiyunqianduantuandui 頭像

政採雲前端團隊 - ZooTeam 前端週刊｜第 59 期

政採雲前端小報第59期 瀏覽更多往期小報，請訪問： https://weekly.zoo.team 扛住100億次請求？我們來試一試 實現單機支持100萬用户，同時模擬了2015年微信紅包的1400萬QPS的場景，讓服務器在壓力下，輕鬆地完成業務。 深入淺出 SWR 原理 - 知乎 本文主要是基於 SWR 源碼對其原理進行分析，但並不會直接從源碼開始，而是從實際需求場景一步一步推導進而實現

hooks , web性能優化 , babel7 , 微前端 , 前端

收藏 評論