基于 Vue CSR 的微前端实现方案
发布于 4 个月前 作者 1340641314 2045 次浏览 来自 分享

在这里就不讲微前端的各种优缺点,直接假设你在负责一个中后台管理系统的开发,所有的业务模块全部都在一个项目中打包,随着业务量的不断增长,编译越来越慢,你期望可以从老的项目中将新的业务进行独立开发、独立部署,以微应用的形式嵌入到老项目中。

本篇文章的受众是那些希望在新老的项目中,在不需要你对老项目进行改动老项目的前提下,嵌入微应用,如果本篇文章对你有帮助,请点个👍!

核心要素

  • 构建生产环境代码,输出远程组件所需的 JSON
  • 通过 ajax 请求,拿到这个 JSON 的数据,传给 远程组件

新项目的搭建

对于项目的搭建,在这里就不再仔细的展开讲了,大家直接看Genesis项目快速开始的文档吧

修改编译代码

import path from 'path';
import fs from 'fs';
import { Build } from '[@fmfe](/user/fmfe)/genesis-compiler';
import { ssr } from './genesis';

const start = async () => {
    /**
     * 创建一个编译实例
     */
    const build = new Build(ssr);
    /**
     * 开始执行编译程序,构建生产环境应用包
     */
    await build.start();
    /**
     * 编译完成后,创建一个渲染器,输出远程组件所需的内容
     */
    const renderer = ssr.createRenderer();
    /**
     * CSR 渲染输出 JSON
     */
    const result = await renderer.render({ mode: 'csr-json' });
    /**
     * 将 JSON 保存到客户端目录
     */
    fs.writeFileSync(
        path.resolve(ssr.outputDirInClient, 'app.json'),
        JSON.stringify(result.data, null, 4),
        'utf8'
    );
};
start();

如果你是根据官方文档来走的话,你只需要自己修改一下 genesis.build.ts 文件即可。如果你自定义了文件名,只要在 await build.start() 方法执行完成后,创建一个渲染器,将 CSR 的渲染结果保存到一个 JSON 文件即可。

编译完成后,你得到的大概是这样的一个文件

你只需要将 client 目录的静态文件部署到你的服务器即可。 image.png

老项目远程组件加载

假设你的静态资源的基本路径是 /ssr-genesis/,那么你就可以通过 /ssr-genesis/app.json 访问到这个文件。

在你的老项目上安装远程组件

npm install @ fmfe/genesis-remote axios

在你对应的路由上,使用远程组件,加载此组件即可。

<template>
    <div class="app">
        <RemoteView :fetch="fetch" />
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import axios from 'axios';
import { RemoteView } from '[@fmfe](/user/fmfe)/genesis-remote';

export default Vue.extend({
    components: {
        RemoteView
    },
    methods: {
        async fetch() {
            const res = await axios.get('/ssr-genesis/app.json');
            if (res.status === 200) {
                return res.data;
            }
            return null;
        }
    }
});
</script>

多历史模式的支持

如果你老项目使用历史模式,在子应用也使用历史模式,会导致 router.push('/xxx') 产生多条历史记录,为了解决这个问题,你可以在子应用使用 abstract 模式,或者使用 [@fmfe/genesis-app](http://localhost:8080/genesis-docs/app/#安装) 帮你处理多个 Router 实例使用历史模式产生的BUG,注意,你需要在新老项目一起使用 [@fmfe/genesis-app](http://localhost:8080/genesis-docs/app/#安装) 包装后的 Router

拓展

/**
 * CSR 渲染输出 HTML
 */
const result = await renderer.render({ mode: 'csr-html' });
/**
 * 将 html 保存到客户端目录
 */
fs.writeFileSync(
    path.resolve(ssr.outputDirInClient, 'index.html'),
    result.data
    'utf8'
);

如果你仅仅只是想做 CSR 的项目,只需要渲染出 html 即可,和平常的 CSR 项目一样,将 client 目录部署到服务器。

总结

Genesis 只是一个 Vue SSR 的渲染库,它不是框架,它只是给你提供了最基础的 SSR 渲染能力。 后面有时间,专门写一篇介绍一些 Genesis 的一些设计理念和诞生的初衷。

6 回复

其实csr和ssr合在一起,一套写法,分开部署,可以在降级上有优势的。

@i5ting 其实我们的CSR和纯粹的CSR渲染还是有些差异,我们还是需要调接口拿到相关的全局配置,然后通过CSR渲染输出在模板中。目前只有SSR渲染失败的时候会降级到CSR渲染返回内容,或者远程组件调用的时候也是走CSR。未来的话,我们一个业务的服务,支持web的响应式、以及APP中的混合开发的离线包(走CSR渲染)

我们生产环境的实际数据测试,页面渲染的性能瓶颈都在接口端的请求响应,Vue的SSR在数据准备就绪的时候,渲染还是非常快的。

其实我们公司内部的后台管理系统,也是经过好几年的超大型项目,业务量巨大,后续我们也是打算使用远程组件来调用新的业务,独立部署。

image.png 这个是我们聚合服务,调用其它的SSR服务渲染的耗时,一次渲染包含了一次获取用户信息的接口、一次调用远程服务的内容。基本上渲染的效率还是在可以接受的范围的。

image.png

这个是我们信号服务,CSR渲染基本上没什么耗时,SSR渲染的时候,倒是会花费一些时间。

回到顶部