前端微架构实践（二）—— 支持 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。

这种模式存在诸多的缺点与不足，可是带来的收益远大于弊端，何况尝鲜与实践不正是创新的表现吗？

感谢阅读！