實現微前端須要瞭解的 Vue Genesis 渲染器

時間 2020-05-30

標籤實現前端須要瞭解 vue genesis 渲染简体版

原文原文鏈接

在 Genesis 中，核心的就是渲染器，它提供了最基礎渲染能力，有了它，你能夠實現微前端、微服務、遠程組件、首屏渲染，甚至能夠和 React、EJS 等配合使用。

它能夠和怎樣的你協做？

若是你是傳統的後端渲染的，須要作SEO，可是你但願在部分佈局，部分頁面引入 Vue，那麼 renderer.renderJson() 足以，將渲染結果傳遞給後端渲染的模板引擎中便可。
若是你是中後臺系統，業務系統所有集中在一個項目，你但願能夠按照業務進行服務的拆分，那麼 <remote-view :fetch="fetch" /> 足以
若是你是 CSR 渲染的項目，那麼 renderer.renderHtml({ mode: 'csr-html' }) 足以
若是你是 SSR 渲染的項目，那麼 renderer.renderHtml({ mode: 'ssr-html' }) 足以

若是你想作微前端、微服務、那麼渲染器 天生就具有了這樣的能力，你能夠把它當成一個工具函數使用，你能夠經過 HTTP 、 RPC 等等各類協議訪問到你的服務，而後使用它進行渲染css

建立一個渲染器

開發環境

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 基本的模板。html

.
├── 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，或者其它的框架，就須要在對應框架上包裝一層中間件使用。vue

生產環境

開發完成後，須要發佈產環境，咱們老是須要將代碼提早編譯好，這樣用戶訪問的時候，就能夠立馬快速的渲染，因此第一步咱們須要先編譯代碼node

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，不然編譯出來的是開發模式下的代碼，運行時的性能會很是差。 :::git

NODE_ENV=production ts-node index.ts
複製代碼

執行上面的編譯命令後，咱們將會獲得一個 dist 目錄，裏面放置了咱們編譯後的代碼。若是你想更改編譯輸出的地址，或者應用名稱，能夠點擊這裏瞭解更多github

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

複製代碼

代碼構建完成後，咱們就能夠在生產環境中直接建立一個渲染器了。vue-router

import { SSR } from '@fmfe/genesis-core';

const start = async () => {
    const ssr = new SSR();
    const renderer = ssr.createRenderer();
    // 拿到渲染器以後，作點什麼 ....
};

start();
複製代碼

生產環境，靜態資源都是基於內容哈希生成的文件名，因此這裏設置靜態目錄的時候，設置強緩存便可express

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

渲染器的使用

至此，無論是開發環境仍是生產環境，咱們都已經拿到了渲染器，接下來咱們能夠使用渲染器去作一些事情了。npm

渲染方法

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 class="app">
        <h2>你好世界！</h2>
        <p v-if="show" @click="close" class="text">
            {{ installed ? '在客戶端應該安裝成功，點擊我關閉!' : '未安裝' }}
        </p>
        <router-view />
    </div>
</template>
複製代碼