實現(xiàn)微前端，你需要了解的 Vue Genesis 渲染器

來源 |?https://www.cnblogs.com/coderhf/archive/2020/06/10/13086341.html

我們的需求

核心的就是渲染器，它提供了最基礎(chǔ)渲染能力，有了它，你可以實現(xiàn)微前端、微服務(wù)、遠(yuǎn)程組件、首屏渲染，甚至可以和 react、Ejs 等配合使用。

它可以和怎樣的你協(xié)作？

• 如果你是傳統(tǒng)的后端渲染的，需要做seo，但是你希望在部分布局，部分頁面引入 vue，那么 renderer.renderjson()?足以，將渲染結(jié)果傳遞給后端渲染的模板引擎中即可。

• 如果你是中后臺系統(tǒng)，業(yè)務(wù)系統(tǒng)全部集中在一個項目，你希望可以按照業(yè)務(wù)進(jìn)行服務(wù)的拆分，那么 `` 足以

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

• 如果你是 SSR 渲染的項目，那么?renderer.renderhtml({ mode: 'ssr-html' })?足以

如果你想做微前端、微服務(wù)、那么渲染器?天生就具備了這樣的能力，你可以把它當(dāng)成一個工具函數(shù)使用，你可以通過 HTTP 、 RPC 等等各種協(xié)議訪問到你的服務(wù)，然后使用它進(jìn)行渲染。

創(chuàng)建一個渲染器

開發(fā)環(huán)境

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();

如果你是項目是第一次創(chuàng)建，程序?qū)詣釉陧椖扛夸泟?chuàng)建 vue 基本的模板。

. ├── src │   ├── app.vue           入口的頁面 │   ├── entry-client.ts   客戶端入口文件 │   ├── entry-server.ts   服務(wù)端入口文件 │   └── shims-vue.d.ts    vue文件的TS聲明 │ └── package.json

因為在實際的開發(fā)環(huán)境中，我們還需要靜態(tài)資源的文件和熱更新，watch?對象還提供了對應(yīng)的中間件使用，如果你使用?Express?框架，可以直接使用

 /**  * 靜態(tài)資源中間件  */ app.use(watch.devMiddleware); /**  * 熱更新的中間件  */ app.use(watch.hotMiddleware);

如果你使用了 Koa，或者其它的框架，就需要在對應(yīng)框架上包裝一層中間件使用。

生產(chǎn)環(huán)境

開發(fā)完成后，需要發(fā)布產(chǎn)環(huán)境，我們總是需要將代碼提前編譯好，這樣用戶訪問的時候，就可以立馬快速的渲染，所以第一步我們需要先編譯代碼。

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 注意?在這里你需要把環(huán)境變量 NODE_ENV 設(shè)置為 production，否則編譯出來的是開發(fā)模式下的代碼，運行時的性能會非常差。?:::

 NODE_ENV=production ts-node index.ts

執(zhí)行上面的編譯命令后，我們將會得到一個 dist 目錄，里面放置了我們編譯后的代碼。如果你想更改編譯輸出的地址，或者應(yīng)用名稱，可以點擊這里了解更多。

. ├── dist │   ├── ssr-genesis                           應(yīng)用名稱 │   │   ├── client                            客戶端資源文件 │   │   |   ├── js                            腳本 │   │   |   ├── css                           樣式 │   │   |   ├── images                        圖片 │   │   |   ├── medias                        媒體資源 │   │   |   └── fonts                         字體文件 │   │   ├── server                            服務(wù)端資源文件 │   │   │   ├── vue-ssr-client-manifest.json  客戶端構(gòu)建清單 │   │   │   └── vue-ssr-server-bundle.json    服務(wù)端應(yīng)用包 │ └── package.json

代碼構(gòu)建完成后，我們就可以在生產(chǎn)環(huán)境中直接創(chuàng)建一個渲染器了。

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

生產(chǎn)環(huán)境，靜態(tài)資源都是基于內(nèi)容哈希生成的文件名，所以這里設(shè)置靜態(tài)目錄的時候，設(shè)置強緩存即可。

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

渲染器的使用

至此，不管是開發(fā)環(huán)境還是生產(chǎn)環(huán)境，我們都已經(jīng)拿到了渲染器，接下來我們可以使用渲染器去做一些事情了。

渲染方法

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

在默認(rèn)的情況下，等同于下面的

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

關(guān)于渲染方法的更多選項，點擊這里了解 renderer.render 方法是渲染器最底層的方法，下面的功能都是基于它來進(jìn)行封裝的。

渲染中間件

如果你的業(yè)務(wù)比較簡單，可以直接通過我們的中間件進(jìn)行快速的開發(fā)，它只是一個簡單的 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 模式，我們可以對渲染的方法包裝一層，并且打印出錯誤信息。

甚至可以通過一些監(jiān)控工具，推送到你的郵箱、短信進(jìn)行報警。

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);

使用路由

調(diào)用渲染函數(shù)時，傳入要渲染的地址和路由的模式，因為在使用遠(yuǎn)程組件的時候，我們可能不太希望這個組件使用歷史模式渲染，也可能使用 abstract 模式渲染，可以最好將它做成動態(tài)的參數(shù)來控制。

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

?注意?vue-router?不支持一個頁面上創(chuàng)建多個歷史模式的路由實例，否則你調(diào)用?router.push()?方法時，將會創(chuàng)建多個歷史記錄，為了解決這個問題，請使用?genesis-app?的路由

router.ts

npm install vue-router

importvue 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

修改我們的服務(wù)端入口文件

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 => {     // 讀取傳過來的路由模式     const mode = renderContext.data.state.routerMode;     // 創(chuàng)建路由     const router = await createRouter(mode);     // 設(shè)置渲染的地址     await router.push(renderContext.data.url);     // 創(chuàng)建 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 => {     // 讀取服務(wù)端下發(fā)的路由模式     const mode = clientOptions.state.routerMode;     // 創(chuàng)建路由     const router = await createRouter(mode);     // 設(shè)置渲染的地址     await router.push(clientOptions.url);     // 創(chuàng)建 Vue 實例     return new Vue({         // 傳入路由對象         router,         clientOptions,         render(h) {             return h(App);         }     }); };

app.vue

修改我們的視圖文件，以便支持路由渲染。

本文完~