# 介绍

# 项目起源

2019年年底的时候,得知公司要推出一个 Followme5.0 (opens new window) 的版本,到时候将会大幅度的重构整个web端的产品,所以本项目也开始应运而生。当时网站首页采用的是 Nuxt (opens new window) 作为SSR的框架,但是它无法满足我们的一些需求,也曾尝试过编写 Nuxt (opens new window) 插件来实现我们的需求,但是最终无法实现,只能另起炉灶了。

# 为什么没有继续使用Nuxt?

Followme (opens new window)是一个极其复杂的网站,我们的技术栈包含了 SSR 和 CSR,在更新公共组件的时候,经常需要同时更新十几个项目,而前端的项目编译又特别慢,就导致哪怕是一个文案的改动,也需要发布大半天。而 Nuxt (opens new window) 的架构形态都是单应用,无法在一个页面上同时支持多个应用实例,以及做到 SSR 微服务化。在微服务理念的构思下,我们开始思考如何重新设计我们需要的架构。

# 我们的需求

我们的需求 我们需要远程组件微服务微前端降级渲染SEO,经过了一些技术的调研,包括了 Nuxt (opens new window) ,最终选择了自己造轮子。

# 架构

核心库 版本号 下载量 说明
@fmfe/genesis-core (opens new window) npm (opens new window) npm (opens new window) 提供基础的插件机制、SSR渲染逻辑、程序配置
@fmfe/genesis-compiler (opens new window) npm (opens new window) npm (opens new window) 仅限开发环境使用,负责编译程序以及在开发时编译,处理webpack的核心逻辑
@fmfe/genesis-app (opens new window) npm (opens new window) npm (opens new window) 快速创建应用,包装了 vue-router ,在微前端应用时支持多个 Router实例时特别有用
@fmfe/genesis-remote (opens new window) npm (opens new window) npm (opens new window) 远程组件,实现微前端的核心依赖
@fmfe/genesis-lint (opens new window) npm (opens new window) npm (opens new window) 一个代码规范的集成,包含了eslint和stylelint

Nuxt (opens new window) 是将 webpack、babel 等开发时用到的依赖,都整合到一个包里,所以就造成了发布生产环境时,需要安装的依赖就特别的多,导致了 docker 构建出来的镜像就特别的大。所以在设计 Genesis 时,将生产和开发时用到的功能,分别拆分成 @fmfe/genesis-core@fmfe/genesis-compiler,这样在生产环境时,只需要安装 @fmfe/genesis-core 即可,对比 Nuxt (opens new window) 将会大大的减少了 docker 镜像的体积

# 小型项目

如果你的项目比较简单,不需要考虑微服务微前端,只需要使用 @fmfe/genesis-core@fmfe/genesis-compiler 即可。

# 大型项目

如果你的项目比较复杂的情况下,需要拓展到微服务微前端,才需要使用 @fmfe/genesis-app@fmfe/genesis-remote

# 代码风格

@fmfe/genesis-lint 是基于一些开源的规范的整合,你完全可以使用其它的第三方 lint 插件。

# 定位

Genesis 是一个轻量级的 Vue SSR 库,它不是框架,它只是提供了最底层 SSR 相关的能力,比如你想做微前端、微服务、或者生成静态的HTML网站、PWA等等,你都需要通过第三方的插件来完成,后续的篇幅将会带你更加深入的学习和了解 Genesis