>[success] # 為什么出現微前端
~~~
1.隨著業務的越來越大打包速度通過打包工具提供的各種優化打包速度的方案已經不能滿足,技術棧的升級
又不想對老代碼進行重構但新的代碼業務想開始嘗試新的技術棧,多個業務之間相同模塊的復用等一系列問題
開始尋求一種新的解決方案,將應用拆解成多個更小、更易管理小應用
2.將'一種由多個獨立可交付的前端應用組合而成更龐大整體的架構方式'成為微前端
3.'微前端就是將不同的功能按照不同的維度拆分成多個子應用。通過主應用來加載這些子應用。' 各個子應用可以是
相同的技術棧,也可以是不同,我們可以按照模塊劃分、技術棧劃分、為了是將原本的巨石般代碼拆開,在合
~~~
注:第二條對微前端的定義來自[# Micro Frontends](https://martinfowler.com/articles/micro-frontends.html)參考他的一問來自[# 【譯】微前端](https://juejin.cn/post/6964219246528167966#heading-2)
>[danger] ##### 更多的解決思路
~~~
1.npm包:將子應用封裝成npm包,通過組件的方式引入,在性能和兼容性上是最優的方案,但卻有一個致命的問題
就是版本更新,每次版本發布需要通知接入方同步更新,管理非常困難。
2.iframe:有一些無法解決的問題,例如性能低、通信復雜、雙滾動條、彈窗無法全局覆蓋,它的成長性不高,
只適合簡單的頁面渲染
注:個人覺得無論采用那種形式去解決,需要針對業務和整體團隊技術項目未來規劃來說,并不是說某種解決
方式不好,更多的解決形式依舊是要針對實際選擇合適的
~~~
[參看這里也給了更多的解決方向,'服務端模板構成'、'構建態集成'、'通過 iframe 在執行態集成'、'通過 JavaScript 在執行態集成'、'通過 Web 組件在執行態集成'](https://juejin.cn/post/6964219246528167966#heading-8)
[實現微前端有哪些方案
](https://juejin.cn/post/6844904162509979662#heading-8)
[對比多種微前端方案](https://github.com/efoxTeam/emp/wiki/%E3%80%8A%E5%AF%B9%E6%AF%94%E5%A4%9A%E7%A7%8D%E5%BE%AE%E5%89%8D%E7%AB%AF%E6%96%B9%E6%A1%88%E3%80%8B)
>[danger] ##### 本質
~~~
1.無論使用那種技術形式去實現本質想解決的例如下面幾個問題
不同團隊間開發同一個應用技術棧不同怎么破?
希望每個團隊都可以獨立開發,獨立部署怎么破?
項目中還需要老的應用代碼怎么破?
相對的這些解決方案整體相同的解決大體方向都是拆分,或者通過路由去對應加載對應拆分內容
~~~
>[danger] ##### 微前端通俗易懂好文
[微前端究竟是什么,可以帶來什么收益](https://juejin.cn/post/6893307922902679560)
[# 微前端-最容易看懂的微前端知識](https://juejin.cn/post/6844904162509979662#heading-0)
>[info] ##### 微前端 好文探討
[# qiankun 技術圓桌](https://www.yuque.com/kuitos/gky7yw/gesexv)
>[danger] ##### 整體總結
[微前端學習系列(一):微前端介紹
](https://juejin.cn/post/6955341801381167112/)
[每日優鮮供應鏈前端團隊微前端改造
](https://juejin.cn/post/6844903943873675271)
- 工程化 -- Node
- vscode -- 插件
- vscode -- 代碼片段
- 前端學會調試
- 谷歌瀏覽器調試技巧
- 權限驗證
- 包管理工具 -- npm
- 常見的 npm ci 指令
- npm -- npm install安裝包
- npm -- package.json
- npm -- 查看包版本信息
- npm - package-lock.json
- npm -- node_modules 層級
- npm -- 依賴包規則
- npm -- install 安裝流程
- npx
- npm -- 發布自己的包
- 包管理工具 -- pnpm
- 模擬數據 -- Mock
- 頁面渲染
- 渲染分析
- core.js && babel
- core.js -- 到底是什么
- 編譯器那些術語
- 詞法解析 -- tokenize
- 語法解析 -- ast
- 遍歷節點 -- traverser
- 轉換階段、生成階段略
- babel
- babel -- 初步上手之了解
- babel -- 初步上手之各種配置(preset-env)
- babel -- 初步上手之各種配置@babel/helpers
- babel -- 初步上手之各種配置@babel/runtime
- babel -- 初步上手之各種配置@babel/plugin-transform-runtime
- babel -- 初步上手之各種配置(babel-polyfills )(未來)
- babel -- 初步上手之各種配置 polyfill-service
- babel -- 初步上手之各種配置(@babel/polyfill )(過去式)
- babel -- 總結
- 各種工具
- 前端 -- 工程化
- 了解 -- Yeoman
- 使用 -- Yeoman
- 了解 -- Plop
- node cli -- 開發自己的腳手架工具
- 自動化構建工具
- Gulp
- 模塊化打包工具為什么出現
- 模塊化打包工具(新) -- webpack
- 簡單使用 -- webpack
- 了解配置 -- webpack.config.js
- webpack -- loader 淺解
- loader -- 配置css模塊解析
- loader -- 圖片和字體(4.x)
- loader -- 圖片和字體(5.x)
- loader -- 圖片優化loader
- loader -- 配置解析js/ts
- webpack -- plugins 淺解
- eslit
- plugins -- CleanWebpackPlugin(4.x)
- plugins -- CleanWebpackPlugin(5.x)
- plugin -- HtmlWebpackPlugin
- plugin -- DefinePlugin 注入全局成員
- webapck -- 模塊解析配置
- webpack -- 文件指紋了解
- webpack -- 開發環境運行構建
- webpack -- 項目環境劃分
- 模塊化打包工具 -- webpack
- webpack -- 打包文件是個啥
- webpack -- 基礎配置項用法
- webpack4.x系列學習
- webpack -- 常見loader加載器
- webpack -- 移動端px轉rem處理
- 開發一個自己loader
- webpack -- plugin插件
- webpack -- 文件指紋
- webpack -- 壓縮css和html構建
- webpack -- 清里構建包
- webpack -- 復制靜態文件
- webpack -- 自定義插件
- wepack -- 關于靜態資源內聯
- webpack -- source map 對照包
- webpack -- 環境劃分構建
- webpack -- 項目構建控制臺輸出
- webpack -- 項目分析
- webpack -- 編譯提速優護體積
- 提速 -- 編譯階段
- webpack -- 項目優化
- webpack -- DefinePlugin 注入全局成員
- webpack -- 代碼分割
- webpack -- 頁面資源提取
- webpack -- import按需引入
- webpack -- 搖樹
- webpack -- 多頁面打包
- webpack -- eslint
- webpack -- srr打包后續看
- webpack -- 構建一個自己的配置后續看
- webpack -- 打包組件和基礎庫
- webpack -- 源碼
- webpack -- 啟動都做了什么
- webpack -- cli做了什么
- webpack - 5
- 模塊化打包工具 -- Rollup
- 工程化搭建代碼規范
- 規范化標準--Eslint
- eslint -- 擴展配置
- eslint -- 指令
- eslint -- vscode
- eslint -- 原理
- Prettier -- 格式化代碼工具
- EditorConfig -- 編輯器編碼風格
- 檢查提交代碼是否符合檢查配置
- 整體流程總結
- 微前端
- single-spa
- 簡單上手 -- single-spa
- 快速理解systemjs
- single-sap 不使用systemjs
- monorepo -- 工程
- Vue -- 響應式了解
- Vue2.x -- 源碼分析
- 發布訂閱和觀察者模式
- 簡單 -- 了解響應式模型(一)
- 簡單 -- 了解響應式模型(二)
- 簡單 --了解虛擬DOM(一)
- 簡單 --了解虛擬DOM(二)
- 簡單 --了解diff算法
- 簡單 --了解nextick
- Snabbdom -- 理解虛擬dom和diff算法
- Snabbdom -- h函數
- Snabbdom - Vnode 函數
- Snabbdom -- init 函數
- Snabbdom -- patch 函數
- 手寫 -- 虛擬dom渲染
- Vue -- minVue
- vue3.x -- 源碼分析
- 分析 -- reactivity
- 好文
- grpc -- 瀏覽器使用gRPC
- grcp-web -- 案例
- 待續