前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a>
        <div class="nav fl">
            <a href="http://www.itpub.net/" rel="nofollow">首頁</a>
            <a href="http://blog.itpub.net/" rel="nofollow">部落格</a>
            <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a>
            <a href="http://edu.itpub.net/" rel="nofollow">學院</a>
            <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a>
            <a href="https://z.itpub.net/" rel="nofollow">技術棧</a>
        </div>
        <div class="fr">
            <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl">
                <input type="hidden" name="type" value="blog">
                <input placeholder="搜尋" type="text" class="layui-input" name="keyword">
                <button class="search-btn icon-blog"></button>
            </form>
            <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a>
            
            <div class="fl head-name" id="u_info">
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css">
        <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css">
    <div></div>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css">
    <div></div>
    <div></div>
    <div></div>

<div></div>
    <div></div>
    <style>
        .code .container > textarea{ height:100%; }
        .translate{color: #9fa3a7 !important;font-size:12px !important;}
        .translate a{font-size:12px !important;color:#9fa3a7 !important;}
        .translate a:hover {font-size:12px !important;color:#f15142 !important;}
        .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee}
        .fake-video-btn:hover{
            cursor: pointer;
            border-style: solid;
            border-width: 2px;
            border-radius: 63px;
            border-color: #00c1de;
        }
        .it-player-wrap {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 20px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            border-radius: 4px;
        }

.it-player-wrap .control {
            width: 50px;
            height: 50px;
            background-color: #57a5f2;
            margin-right: 15px;
            border-radius: 50%;
        }

.it-player-wrap .control .play,.it-player-wrap .control .pause {
            background-size: 30px !important;
            color: #ffffff;
            width: 100%;
            height: 100%;
        }

.it-player-wrap .control .play {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center;

}

.it-player-wrap .control .pause {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center;
        }

.it-player-wrap .box {

flex: 1;
        }

.it-player-wrap .box .info {
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #A8A8A8;
            text-align: left;
            line-height: 24px;
            margin: 0;
        }

.it-player-wrap .box .info .size {
            display: inline-block;
            margin-right: 15px;
        }

.it-player-wrap .progress-wrap {
            position: relative;
            margin-top: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.it-player-wrap .progress-line,.it-player-wrap  .progress-line-inner {
            position: absolute;
            height: 6px;
            width: 100%;
            background: #DDECFF;
            border-radius: 8.5px;
        }

.it-player-wrap .progress-line-inner {
            background: #4C83E5 !important;
        }

.it-player-wrap .progress-button {
            position: absolute;
            width: 50px;
            height: 20px;
            background: #4C83E5;
            box-shadow: 0 2px 4px 0 #A0C2FF;
            border-radius: 10px;
            top: -10px;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 20px;

cursor: pointer;
        }
    </style>

</style>

<div class="crumb">
        <p>
            <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> >
            <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> >
            <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> >
            <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a>
        </p>
    </div>
    
    <div class="blog-main clearfix w1200">
        <div class="preview-wrap">
            <div class="preview-header">
                <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子                 </h1>
                <div class="mess">
                                            <span class="label label-original">原創</span>
                                        <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span>
                                            <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span>
                                        <span>時間：2021-07-29 15:10:49</span>
                    <span class="dian"></span>
                    <span class="icon-see"></span>
                    <span class="dian"></span>
                    <span class="icon-comment">0</span>

<i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i>
                    <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i>
                    
                </div>
            </div>
            <div class="preview-body windowH">

<div id="doc-content" style="padding: 0px;">
                            <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。

[原文地址](https://martinfowler.com/articles/micro-frontends.html)

想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節：

* 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西

* 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求

* 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項

![](https://img-blog.csdnimg.cn/img_convert/47ad514511b475afdea59c8251668554.png)

每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。

在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。

# Integration approaches

鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它：

* 呈現常見的頁面元素，例如頁首和頁尾
* 解決跨領域問題，如身份驗證和導航
* 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己

![](https://img-blog.csdnimg.cn/img_convert/49fce979181d3932519e32418b5dcfe5.png)

# Server-side template composition

我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容：

```html

<div class="blog-header">
    <div class="w1200">
        <a href="http://blog.itpub.net/" class="fl" rel="nofollow"></a></div></div>

微前端(Micro Frontend ) 落地實施的一些具體例子

相關文章