实现微前端需要了解的 Vue Genesis 渲染器

更新日期: 2020-06-08阅读: 2.5k标签: 微前端


我们的需求

核心的就是渲染器,它提供了最基础渲染能力,有了它,你可以实现微前端、微服务、远程组件、首屏渲染,甚至可以和 react、EJS 等配合使用。


它可以和怎样的你协作?

  • 如果你是传统的后端渲染的,需要做seo,但是你希望在部分布局,部分页面引入 vue,那么 renderer.renderJson() 足以,将渲染结果传递给后端渲染的模板引擎中即可。

  • 如果你是中后台系统,业务系统全部集中在一个项目,你希望可以按照业务进行服务的拆分,那么 `` 足以

  • 如果你是 CSR 渲染的项目,那么 renderer.renderhtml({ mode: 'csr-html' }) 足以

  • 如果你是 SSR 渲染的项目,那么 renderer.renderHtml({ mode: 'ssr-html' }) 足以

如果你想做微前端、微服务、那么渲染器 天生就具备了这样的能力,你可以把它当成一个工具函数使用,你可以通过 HTTP 、 RPC 等等各种协议访问到你的服务,然后使用它进行渲染


创建一个渲染器

开发环境

 import { SSR } from '@fmfe/genesis-core';
 import { Watch } from '@fmfe/genesis-compiler';
 
 const start = async () => {
     const ssr = new SSR();
     const watch = new Watch(ssr);
     await watch.start();
     const renderer = watch.renderer;
     // 拿到渲染器之后,做点什么 ....
 };
 
 start();

如果你是项目是第一次创建,程序将会自动在项目根目录创建 Vue 基本的模板。

 .
 ├── src
 │   ├── app.vue           入口的页面
 │   ├── entry-client.ts   客户端入口文件
 │   ├── entry-server.ts   服务端入口文件
 │   └── shims-vue.d.ts    vue文件的TS声明
 │
 └── package.json

因为在实际的开发环境中,我们还需要静态资源的文件和热更新,watch 对象还提供了对应的中间件使用,如果你使用 Express 框架,可以直接使用

 /**
  * 静态资源中间件
  */
 app.use(watch.devMiddleware);
 /**
  * 热更新的中间件
  */
 app.use(watch.hotMiddleware);

如果你使用了 Koa,或者其它的框架,就需要在对应框架上包装一层中间件使用。


生产环境

开发完成后,需要发布产环境,我们总是需要将代码提前编译好,这样用户访问的时候,就可以立马快速的渲染,所以第一步我们需要先编译代码

 import { SSR } from '@fmfe/genesis-core';
 import { Build } from '@fmfe/genesis-compiler';
 
 const start = () => {
     const ssr = new SSR();
     const build = new Build(ssr);
     return build.start();
 };
 
 start();

::: warning 注意 在这里你需要把环境变量 NODE_ENV 设置为 production,否则编译出来的是开发模式下的代码,运行时的性能会非常差。 :::

 NODE_ENV=production ts-node index.ts

执行上面的编译命令后,我们将会得到一个 dist 目录,里面放置了我们编译后的代码。如果你想更改编译输出的地址,或者应用名称,可以点击这里了解更多

 .
 ├── dist
 │   ├── ssr-genesis                           应用名称
 │   │   ├── client                            客户端资源文件
 │   │   |   ├── js                            脚本
 │   │   |   ├── css                           样式
 │   │   |   ├── images                        图片
 │   │   |   ├── medias                        媒体资源
 │   │   |   └── fonts                         字体文件
 │   │   ├── server                            服务端资源文件
 │   │   │   ├── vue-ssr-client-manifest.json  客户端构建清单
 │   │   │   └── vue-ssr-server-bundle.json    服务端应用包
 │
 └── package.json

代码构建完成后,我们就可以在生产环境中直接创建一个渲染器了。

 import { SSR } from '@fmfe/genesis-core';
 
 const start = async () => {
     const ssr = new SSR();
     const renderer = ssr.createRenderer();
     // 拿到渲染器之后,做点什么 ....
 };
 
 start();

生产环境,静态资源都是基于内容哈希生成的文件名,所以这里设置静态目录的时候,设置强缓存即可

 app.use(
     renderer.staticPublicPath,
     express.static(renderer.staticDir, {
         immutable: true,
         maxAge: '31536000000'
     })
 );

渲染器的使用

至此,不管是开发环境还是生产环境,我们都已经拿到了渲染器,接下来我们可以使用渲染器去做一些事情了。


渲染方法

renderer.render().then((result) => {
    console.log(result.data);
});

在默认的情况下,等同于下面的

renderer.render({ url: '/', mode: 'ssr-html' }).then((result) => {
    console.log(result.data);
});

关于渲染方法的更多选项,点击这里了解 renderer.render 方法是渲染器最底层的方法,下面的功能都是基于它来进行封装的。


渲染中间件

如果你的业务比较简单,可以直接通过我们的中间件进行快速的开发,它只是一个简单的 SSR 中间件。 ::: warning 注意 如果 SSR 渲染失败,该中间件不会帮你降级渲染到 CSR :::

app.use(renderer.renderMiddleware);


渲染 HTML

const result = await renderer.renderHtml();
console.log(result);

 

渲染 JSON

const result = await renderer.renderJson();
console.log(result);

 

降级渲染

为了更好的用户体验,在SSR渲染失败的时候,我们期望它可以降级渲染到 CSR 模式,我们可以对渲染的方法包装一层,并且打印出错误信息。甚至可以通过一些监控工具,推送到你的邮箱、短信进行报警。

const render = (options: RenderOptions = {}) => {
    return renderer.render(options).catch((err: Error) => {
        // 打印渲染失败的错误信息
        console.error(err);
        const mode: RenderMode = options.mode || 'ssr-html';
        return renderer.render({
            ...options,
            mode: mode.indexOf('html') ? 'csr-html' : 'csr-json'
        });
    });
};
const result = await render();
console.log(result.data);

 

使用路由

调用渲染函数时,传入要渲染的地址和路由的模式,因为在使用远程组件的时候,我们可能不太希望这个组件使用历史模式渲染,也可能使用 abstract 模式渲染,可以最好将它做成动态的参数来控制。

 

const result = await render({ url: '/', state: { routerMode: 'history' } });
console.log(result.data);

 注意 vue-router 不支持一个页面上创建多个历史模式的路由实例,否则你调用 router.push() 方法时,将会创建多个历史记录,为了解决这个问题,请使用 genesis-app 的路由

router.ts

npm install vue-router
 

import Vue from 'vue';
import Router, { RouterMode } from 'vue-router';

Vue.use(Router);

export const createRouter = (mode: RouterMode = 'history') => {
    return new Router({
        mode: mode,
        routes: [
            // 配置你的路由
        ]
    });
};

entry-server.ts

修改我们的服务端入口文件

 import { RenderContext } from '@fmfe/genesis-core';
 import Vue from 'vue';
 import App from './app.vue';
 import { createRouter } from './router';
 
 export default async (renderContext: RenderContext): Promise<Vue> => {
     // 读取传过来的路由模式
     const mode = renderContext.data.state.routerMode;
     // 创建路由
     const router = await createRouter(mode);
     // 设置渲染的地址
     await router.push(renderContext.data.url);
     // 创建 Vue 实例
     return new Vue({
         // 传入路由对象
         router,
         renderContext,
         render(h) {
             return h(App);
         }
     });
 };

entry-client.ts

修改我们的客户端入口文件

 import { ClientOptions } from '@fmfe/genesis-core';
 import Vue from 'vue';
 import App from './app.vue';
 import { createRouter } from './router';
 
 export default async (clientOptions: ClientOptions): Promise<Vue> => {
     // 读取服务端下发的路由模式
     const mode = clientOptions.state.routerMode;
     // 创建路由
     const router = await createRouter(mode);
     // 设置渲染的地址
     await router.push(clientOptions.url);
     // 创建 Vue 实例
     return new Vue({
         // 传入路由对象
         router,
         clientOptions,
         render(h) {
             return h(App);
         }
     });
 };

app.vue

修改我们的视图文件,以便支持路由渲染

 <template>
     <div>
         <h2>你好世界!</h2>
         <p v-if="show" @click="close">
             {{ installed ? '在客户端应该安装成功,点击我关闭!' : '未安装' }}
         </p>
         <router-view />
     </div>
 </template>
原文:https://www.cnblogs.com/coderhf/archive/2020/06/10/13086341.html

链接: https://fly63.com/article/detial/9282

实施微前端的六种方式

微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是,这些前端应用可以独立运行、独立开发、独立部署。

基于 React & TS & Webpack 的微前端应用模板

在 Web 开发导论/微前端与大前端一文中,笔者简述了微服务与微前端的设计理念以及微前端的潜在可行方案。微服务与微前端,都是希望将某个单一的单体应用,转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合

微前端的好处和缺陷

“微前端架构”是一种使用微服务模式构建前端应用的方法。微前端的理念是将你的前端拆分为一组可独立部署、松散耦合的应用。然后将这些应用组装在一起以创建面向用户的单个应用程序

微前端如何落地?

在过去的几星期里,随着 Martin Fowler 博客上,那篇 Cam Jackson 写的微前端的文章发布,到处都在讨论 Microfrontend。作为一个微前端 “专家”,我也分享一下:如何去落地微前端

微前端究竟好在哪?

微前端架构是一种设计方法,其中,前端应用被分解为多个松散而协同工作的半独立“微应用”。微前端的思想来源于微服务,其名称也遵循了微服务的命名方式。那么,微前端的优势和好处在哪?让我们一起通过这篇微前端教程来了解

从微前端聊聊架构演进

就目前来看,微前端已经不是一个新话题了。随着越来越多的公司的深入研究,当前也提出了很多的解决方案。不过本文不是想要来介绍微前端,更想介绍项目如何一步步到达微前端架构的实际需求

微前端开发常见问题汇总

微前端开发常见问题汇总,前端应用可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具而是一套架构体系。其在开发中会有各种问题,今天小编整理了一下分享给大家!

用Single-spa 创建基于React和Vue的微前端

Single SPA 是一个用于前端微服务的 javascript 框架。它使你可以在单页应用中使用多个框架,这样就可以按功能拆分代码,并 能使 Angular、React、Vue.js 程序一起运行

5分钟带你了解微前端

不同于单纯的前端框架/工具,微前端是一套架构体系,这个概念最早在2016年底由 ThoughtWorks 提出。 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,将 Web 应用从整个的「单体应用」转变为多个小型前端应用的「聚合体」。

什么是微前端

微前端的理念源自微服务,使用一个主应用作为主体框架和微应用加载器,根据不用的路由加载不同的微应用。微应用之间做到技术隔离,在展示上却是统一的。微前端主要用来解决单体应用在相对长的时间跨度下

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!