国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微前端 —— 理論篇

wangbinke / 3469人閱讀

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

1. 微前端

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

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

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

iframe（難度：1）

single-spa（難度：4）

3. iframe

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

4. single-spa

官網(wǎng)鏈接

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

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

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

????????由于有些項(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/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 評論0 收藏0

  • 網(wǎng)站部署

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

    endless_road 評論0 收藏0

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

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

    Euphoria 評論0 收藏0

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

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

    shiguibiao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<