成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

微前端 —— 理論篇

wangbinke / 3499人閱讀

摘要：現(xiàn)在開始從頭搭建我們的微前端架構(gòu)。項(xiàng)目源碼微前端項(xiàng)目微前端微前端項(xiàng)目

1. 微前端

????????基于spa類的單頁應(yīng)用，隨著企業(yè)工程項(xiàng)目的體積越來越大，開發(fā)的功能越來越多，頁面也越來越多，項(xiàng)目隨之也變得越來越臃腫，維護(hù)起來十分困難，往往改一個(gè)logo，或者改一個(gè)小樣式，都要將項(xiàng)目全部重新打包一遍，維護(hù)困難，部署也困難。
????????因此前端在借鑒后端的微服務(wù)架構(gòu)模式后，衍生了微前端架構(gòu)，將一個(gè)功能繁多的單頁應(yīng)用轉(zhuǎn)換為多個(gè)小型單頁應(yīng)用的組合，這些小型應(yīng)用往往具有獨(dú)立開發(fā)、獨(dú)立運(yùn)行、獨(dú)立部署的特點(diǎn)。它們通常與技術(shù)棧無關(guān)，不同的應(yīng)用可以用react開發(fā)，也可以用vue開發(fā)，但是它們始終能組成一個(gè)完整的應(yīng)用。

2. 可實(shí)現(xiàn)方式

????????以下是基于我已經(jīng)實(shí)現(xiàn)的方式介紹的（畢竟沒親手操作過，啥也吹不出來?。?/p>

iframe（難度：1）

single-spa（難度：4）

3. iframe

???????? iframe實(shí)現(xiàn)的方式很簡(jiǎn)單，這里就簡(jiǎn)單闡述一下。通常是一個(gè)portal項(xiàng)目作為各個(gè)小型應(yīng)用項(xiàng)目的入口，此portal項(xiàng)目包含業(yè)務(wù)菜單，權(quán)限控制等，而各個(gè)小型應(yīng)用項(xiàng)目獨(dú)立開發(fā)，打包并部署到各自服務(wù)器上面，在portal項(xiàng)目中，通過將需要展示的小型應(yīng)用的url賦值給iframe的url，將其內(nèi)嵌在portal項(xiàng)目中即可，十分簡(jiǎn)單。
???????? 優(yōu)點(diǎn)：實(shí)現(xiàn)簡(jiǎn)單
???????? 缺點(diǎn)：iframe與主頁面共享連接池；由于iframe與主頁面的靜態(tài)資源文件無法共享，所以相同的依賴在各個(gè)項(xiàng)目中獨(dú)自打包，導(dǎo)致用戶需要加載很多重復(fù)的依賴，例如react.js、vue.js等，這是影響性能的主要原因；還有一個(gè)就是用戶縮放等操作，iframe內(nèi)部的樣式無法同時(shí)適配。

4. single-spa

官網(wǎng)鏈接

???????? single-spa在官網(wǎng)中被自稱為一個(gè)元框架，可以實(shí)現(xiàn)在一個(gè)頁面將多個(gè)不同的框架整合，甚至在切換的時(shí)候都不需要刷新頁面（支持 React、Vue、Angular 1、Angular 2、Ember 等等）
???????? 官網(wǎng)中的例子是所有項(xiàng)目都在同一個(gè)倉儲(chǔ)中的，這顯然違背了我們的初衷，我們需要每一個(gè)小應(yīng)用都有自己獨(dú)立的倉儲(chǔ)，好在官網(wǎng)中也推薦了一個(gè)System框架的案例，實(shí)現(xiàn)了各個(gè)小應(yīng)用的獨(dú)立倉儲(chǔ)。

????????*現(xiàn)在開始從頭搭建我們的微前端架構(gòu)*。我們要實(shí)現(xiàn)的應(yīng)用是一個(gè)主菜單，五個(gè)小頁面，每個(gè)菜單對(duì)應(yīng)一個(gè)頁面。有一個(gè)menu應(yīng)用，里面包含了菜單的跳轉(zhuǎn)；一個(gè)react應(yīng)用，其中包含3個(gè)頁面；一個(gè)vue應(yīng)用，包含兩個(gè)頁面。
????????項(xiàng)目架構(gòu)：

????????其中menu是主菜單應(yīng)用；portal是應(yīng)用注冊(cè)、路由分發(fā)等服務(wù)和共同依賴包(react、react-dom等)的抽離；project1是react應(yīng)用，包含3個(gè)子頁面；project2是vue應(yīng)用，包含2個(gè)子頁面。

????????由于有些項(xiàng)目的搭建過程太過繁瑣，我將分為三篇文章分別介紹portal項(xiàng)目的搭建、project1與menu項(xiàng)目的搭建、project2項(xiàng)目的搭建。


????????項(xiàng)目源碼

????????微前端 —— portal項(xiàng)目
????????微前端 —— menu&&project1（React）
????????微前端 —— project2項(xiàng)目（VUE

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106342.html

相關(guān)文章

  • 微前端 —— project2項(xiàng)目（VUE）

    摘要：前言微前端理論篇微前端項(xiàng)目微前端前一篇文章講解了項(xiàng)目在微前端架構(gòu)中的應(yīng)用，本篇為最后一篇，項(xiàng)目在此架構(gòu)中的應(yīng)用。項(xiàng)目我們就不自己搭建了，直接使用腳手架生成。 前言 ????????微前端 —— 理論篇????????微前端 —— portal項(xiàng)目????????微前端 —— menu&&project1（React）????????前一篇文章講解了react項(xiàng)目在single-spa微...

    kumfo 評(píng)論0 收藏0

  • 網(wǎng)站部署

    摘要：就鹿晗宣布戀情導(dǎo)致微博宕機(jī)事件淺談大型網(wǎng)站高可用性架構(gòu)中午吃飯刷著刷著微博發(fā)現(xiàn)微博突然掛了。用戶在使用瀏覽器訪問一個(gè)網(wǎng)站時(shí)需要先通過協(xié)議向服務(wù)器發(fā)送請(qǐng)求，之后服務(wù)器返回文件與響應(yīng)信息。 webpack：從入門到真實(shí)項(xiàng)目配置 自從出現(xiàn)模塊化以后，大家可以將原本一坨代碼分離到個(gè)個(gè)模塊中，但是由此引發(fā)了一個(gè)問題。每個(gè) JS 文件都需要從服務(wù)器去拿，由此會(huì)導(dǎo)致加載速度變慢。Webpack 最主...

    endless_road 評(píng)論0 收藏0

  • 微前端 —— menu&&project1（React）

    摘要：前言微前端理論篇微前端項(xiàng)目上一篇中，我們完成了項(xiàng)目的搭建，算是完成了整個(gè)微前端架構(gòu)的一半工程了。項(xiàng)目項(xiàng)目是作為頁面的菜單顯示的，主要用于路由的控制。源碼地址源碼地址項(xiàng)目源碼地址微前端理論篇微前端項(xiàng)目微前端項(xiàng)目 前言 ????????微前端 —— 理論篇????????微前端 —— portal項(xiàng)目????????上一篇中，我們完成了portal項(xiàng)目的搭建，算是完成了整個(gè)微前端架構(gòu)的一半...

    Euphoria 評(píng)論0 收藏0

  • 微前端 —— portal項(xiàng)目

    摘要：前言微前端理論篇上一篇介紹了微前端的理念，本片將開始介紹項(xiàng)目。先實(shí)現(xiàn)公共依賴的引入吧。在上一步我們沒有引入的依賴包，是因?yàn)榈囊蕾嚢亲鳛楣惨蕾噷?dǎo)入的。里面全是我的公共依賴文件在下新建文件夾，新建文件，作為我們整個(gè)項(xiàng)目的頁面文件。 前言 微前端 —— 理論篇 上一篇介紹了微前端的理念，本片將開始介紹portal項(xiàng)目。 portal項(xiàng)目介紹 ????????portal項(xiàng)目包括兩個(gè)...

    shiguibiao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<