前端微架構實踐（二）—— 支持 Vue 和 React 技術棧

時間 2019-11-07

標籤前端架構實踐支持 vue react 技術欄目系統架構简体版

原文原文鏈接

本文同步發表在我的博客前端微架構實踐（二）css

概述

由前一篇前端微架構實踐擴展而來，在支持主子項目拆分獨立開發部署的前提下，增長了對 React 的支持，也就是說這種模式支持如下特性：html

主子項目的建立經過 cli 工具初始化模版
主子項目開發時，能看到所有的項目內容，而不是僅僅只有項目自己的內容
獨立開發部署
主子項目能夠是 Vue 或 React 技術棧
非 iframe 嵌套，純路由渲染

這是一種比較傻瓜式的架構模式，但容易理解並解決了目前項目所帶來的問題：項目大、打包慢、項目的技術棧或主庫版本一旦更新就涉及很大重構等等。流程圖在第一篇文章有介紹，這種模式的缺點：前端

同時存在 Vue 和 React 實例、路由實例。
store 可使用一種技術棧共享，但互相通訊有額外成本
等等目前還未遇到的問題

原理

在以前介紹的原理之上，新增長的部分：vue

經過 CDN 引入主庫 gz 後的代碼，6個包總共約 1.2M（下面有截圖）
須要提供2個掛載容器給 Vue 和 React 實例，在同一個路由下，2個實例只會渲染其中一個
開發與構建時的 publicPath 區分，可解決按需加載 js、css、 img 的問題
關於文件 hash 的問題，由於在配置文件中要指定子項目的 app.js ，考慮過是否要去掉 hash，後面仍是保留了，由於去掉 hash 後解決緩存的惟一辦法就是在部署時增長版本號，相比於使用腳本去自動生成配置文件，成本更大。

一、容器 html 的代碼

<body>
    <div id="vue"></div>
    <div id="react"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <!--⚠️注意：這裏 store 我使用 vuex ，徹底可使用其餘庫，來實現主子項目對全局狀態的共享-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.1.2/react-router-dom.min.js"></script>
    <!--菜單配置文件-->
    <script src="http://localhost:85/config.js"></script>
</body>
複製代碼

二、渲染後的項目結構

在2個根容器中，分別存在 nav 和 root，這是我同時使用 vue 和 react 渲染的2個掛載點，在主項目中，2個掛載點 vue-root 和 react-root 是必須的，這是提供給子項目渲染視圖的容器，其餘的內容能夠隨意寫。react

三、渲染後的demo

demo 圖15M，轉存失敗，直接掛連接吧webpack

iming.work/demo/static…git

Tips：菜單信息從配置文件讀取渲染（這裏 react 菜單是我寫死的）github

注意觀察路由以及 root 容器的變化，掛載容器始終只會被渲染其中的一個。另外，在 vue 實例中，主子項目還能夠互相調用。web

資源加載的大小以下圖：ajax

如何建立 react 子項目

React 的項目模版 webpack 我複用了 vue-cli 3，好用沒任何毛病，雖然能夠本身寫，但徹底不必。

安裝 micro-structure-cli 插件

micro init

# 選擇子項目

# 選擇 react
複製代碼

等待模版下載完成便可。

總結

我大概的瞭解了目前比較流行的微架構框架 single spa，發現

不跨技術棧，能夠獨立開發和部署
跨技術棧，主子項目要一塊兒打包

不知是我瞭解的不夠深仍是沒有看到更好的例子？歡迎回答。

我也看了每日優鮮供應鏈前端團隊微前端改造，他們實現的模式是沒有跨技術棧的，因此可以獨立開發部署。可是爲了避免同的業務場景，使用不一樣的框架仍是很是很是有利的，例如表單使用 react 的 uform。

這種模式存在諸多的缺點與不足，可是帶來的收益遠大於弊端，何況嚐鮮與實踐不正是創新的表現嗎？

感謝閱讀！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。