>

服务端渲染工程化建设,SSLX570服务端渲染Webpac

- 编辑:www.bifa688.com -

服务端渲染工程化建设,SSLX570服务端渲染Webpac

光阴: 2019-10-03读书: 135标签: 渲染1. 本土Egg项目运转

在贯彻 egg vue 服务端渲染工程化完结从前,我们先来探影后边两篇关于Webpack创设和Egg的稿子:

第风流倜傥推行node index.js或然npm run dev运营 Egg应用

  • 在 Webpack工程化施工方案easywebpack 小说中大家提到了基于 Vue 营造的应用方案 easywebpack-vue. easywebpack-vue 扶助纯前端格局和Node层创设,这为 Vue 服务端渲染提供了支撑,大家只要求轻便的布置关键的 entry 和 alias 就足以做到 Vue 前端渲染营造和 Node 层创设, 极大的简化了 Vue 服务端渲染构建的干活,能够让我们把基本放到 Vue 服务端渲染的贯彻地点。

  • 在 Egg Webpack 热更新实现 小说中我们因而Egg 框架的 Message 通讯机制完结了 Webpack 内部存款和储蓄器编写翻译热更新完成插件 egg-webpack,保障 Node 层代码修正重启时,Webpack 编写翻译实举例故留存, 为地面开荒Node层代码校勘和热更新提供了帮衬。

在 Egg Agent 里面运维koa服务, 同不平时间在koa服务内部运行Webpack编写翻译服务

Vue 服务端(Node卡塔尔渲染机制

从 Vue 的官方扶助大家清楚,Vue 是协助服务端渲染的,并且还提供了法定渲染插件 vue-server-renderer 提供了依赖 JSBundle 或 JSON 文件渲染形式和流渲染格局。这里我们任重先生而道远讲基于 JSBundle 的服务端渲染完毕,流渲染格局如今在 Egg 框架之中与 Egg 部分插件有冲突(Header写入机会难点State of Qatar, 后续作为独立的斟酌课题。其余依照 Vue JSON 文件字符串塑造渲染请移步 VueSSRPlugin 这种方案最近基于 Vue 官方的Plugin在创设上边只好塑造单页面(生成三个json manfiest,八个会有冲突卡塔尔,康健的消除方案要求后续商讨。

率先,大家来探视 vue-server-renderer 提供的 createBundleRenderer 和 renderToString 怎么把 JSBundle 编写翻译成 HTML。
依靠 vue-server-renderer 完结 JSBundle 首要代码如下:

const renderer = require('vue-server-renderer');
// filepath 为 Webpack 构建的服务端代码
const bundleRenderer = renderer.createBundleRenderer(filepath, renderOptions);
// data 为 Node端获取到的数据
const context = { state: data };
return new Promise((resolve, reject) => {
  bundleRenderer.renderToString(context, (err, html) => {
  if (err) {
    reject(err);
  } else {
    resolve(html);
  }
});

那其间独自轻巧思索了编写翻译,对于缓存,财富依赖都并未有设想。其实在做 Vue 服务端渲染时,关键之处就在于这里,怎样保管 Vue 渲染的速度,同一时候也要满足实际的体系供给。

缓存

  • 一时一刻 createBundleRenderer 方法提供了 options 扩大参数,提供了 cache 的接口,帮衬组件等级缓存,大家那边再近一步支持页面缓存,也等于依附文件把 createBundleRenderer 缓存起来。

  • runInNewContext:暗许情形下,对于每一回渲染,bundle renderer 将创制八个新的 V8 上下文仁同一视复实施总体 bundle。那全部部分实惠 - 举例,应用程序代码与服务器进程隔开,我们无需顾忌文档中涉嫌的情景单例难题。但是,这种情势有局地一定大的本性成本,因为重新创立上下文并实践总体 bundle 依旧极度昂贵的,极度是当使用超大的时候。出于向后十分的思忖,此选项默许为true,但提出你尽量接纳 runInNewContext: false 或 runInNewContext: 'once'(这段消息来源 Vue 官方网址:https://ssr.vuejs.org/zh/api.html#runinnewcontext卡塔尔(قطر‎。从实质上项目总括解析也认证了此间所说的属性费用难点:runInNewContext=false 能确定压实 render 速度,从线上实际总括来看,runInNewContext=false 能刚毅拉长 render速度 3 倍以上(二个多模块的5屏的列表页面,runInNewContext = true 时的render时间平均在60-80ms,runInNewContext = false 时的render时间平均在20-30ms卡塔尔。

依照上述两点, 大家兑现了 egg-view-vue 插件, 提供了 Vue 渲染引擎。在 Egg 项目里面,咱们得以因而 this.app.vue 获得 Vue 渲染引擎的实例,然后就能够依赖提供的主意开展 Vue 编译成 HTML。

  • egg-view-vue 暴露的 vue 实例
const Engine = require('../../lib/engine');
const VUE_ENGINE = Symbol('Application#vue');

module.exports = {

  get vue() {
    if (!this[VUE_ENGINE]) {
      this[VUE_ENGINE] = new Engine(this);
    }
    return this[VUE_ENGINE];
  },
};
  • Vue View Engine 设计达成
'use strict';
const Vue = require('vue');
const LRU = require('lru-cache');
const vueServerRenderer = require('vue-server-renderer');

class Engine {
  constructor(app) {
    this.app = app;
    this.config = app.config.vue;
    this.vueServerRenderer = vueServerRenderer;
    this.renderer = this.vueServerRenderer.createRenderer();
    this.renderOptions = this.config.renderOptions;

    if (this.config.cache === true) {
      this.bundleCache = LRU({
        max: 1000,
        maxAge: 1000 * 3600 * 24 * 7,
      });
    } else if (typeof this.config.cache === 'object') {
      if (this.config.cache.set && this.config.cache.get) {
        this.bundleCache = this.config.cache;
      } else {
        this.bundleCache = LRU(this.config.cache);
      }
    }
  }

  createBundleRenderer(name, renderOptions) {
    if (this.bundleCache) {
      const bundleRenderer = this.bundleCache.get(name);
      if (bundleRenderer) {
        return bundleRenderer;
      }
    }
    const bundleRenderer = this.vueServerRenderer.createBundleRenderer(name, Object.assign({}, this.renderOptions, renderOptions));
    if (this.bundleCache) {
      this.bundleCache.set(name, bundleRenderer);
    }
    return bundleRenderer;
  }

  renderBundle(name, context, options) {
    context = context || /* istanbul ignore next */ {};
    options = options || /* istanbul ignore next */ {};

    return new Promise((resolve, reject) => {
      this.createBundleRenderer(name, options.renderOptions).renderToString(context, (err, html) => {
        if (err) {
          reject(err);
        } else {
          resolve(html);
        }
      });
    });
  }

  renderString(tpl, locals, options) {
    const vConfig = Object.assign({ template: tpl, data: locals }, options);
    const vm = new Vue(vConfig);
    return new Promise((resolve, reject) => {
      this.renderer.renderToString(vm, (err, html) => {
        if (err) {
          reject(err);
        } else {
          resolve(html);
        }
      });
    });
  }
}

module.exports = Engine;

能源信任

  • 至于页面能源注重大家得以结合 Webpack 的 webpack-manifest-plugin 插件 生成每一种页面能源正视表。 然后在 render 时, 大家根据文件名找到呼应的能源信赖,然后掺入到HTML的钦定地点。

  • Vue 服务端渲染时,我们清楚服务端渲染时,只是把Vue 编写翻译成HTML文本,至于页面包车型客车平地风波绑定和有个别浏览器端起初化职业还必要大家和好管理,而拍卖那一个,我们还索要 Vue模板文件数量绑定的固有数据,所以大家这里还供给统生龙活虎管理INIT_STATE 数据难题。这里大家在 render 后,统一通过 script 标签把数据输出到页面。这里我们由此 serialize-javascript 会举行统豆蔻梢头的系列化。注意: 一些乖巧数据请不要输出到页面,平日建议通过 API 获得原本数据时,进行多少洗濯,只把 Vue 模板文件须要的多寡丢给 render 函数。

依附上述两点, 大家贯彻了 egg-view-vue-ssr 插件, 消除财富注重和数目难题。该插件是凭借 egg-view-vue 扩张而来, 会覆盖 render 方法。 近来的兑现形式会生出叁个主题素材,具体请看 多引擎难题

inject(html, context, name, config, options) {
    const fileKey = name;
    const fileManifest = this.resourceDeps[fileKey];
    if (fileManifest) {
      const headInject = [];
      const bodyInject = [];
      const publicPath = this.buildConfig.publicPath;
      if (config.injectCss && (options.injectCss === undefined || options.injectCss)) {
        fileManifest.css.forEach(item => {
          headInject.push(this.createCssLinkTag(publicPath   item));
        });
      } else {
        headInject.push(context.styles);
      }
      if (config.injectJs) {
        fileManifest.script.forEach(item => {
          bodyInject.push(this.createScriptSrcTag(publicPath   item));
        });
        if (!/window.__INITIAL_STATE__/.test(html)) {
          bodyInject.unshift(`<script> window.__INITIAL_STATE__= ${serialize(context.state, { isJSON: true })};</script>`);
        }
      }
      this.injectHead(headInject);
      html = html.replace(this.headRegExp, match => {
        return headInject.join('')   match;
      });

      this.injectBody(bodyInject);
      html = html.replace(this.bodyRegExp, match => {
        return bodyInject.join('')   match;
      });
    }
    return config.afterRender(html, context);
  }

挂载Webpack内部存款和储蓄器文件读取方法覆盖当和姑件读取的逻辑

Vue 服务端(Node) 构建

在始发大家关系了 easywebpack-vue 营造方案,我们能够通过该解决方案产生Webpack Vue 的构建方案。具体完结请看 Webpack工程化实施方案easywebpack 和 easywebpack-vue 插件。 这里大家平昔提供 webpack.config.js 配置,依据该配置就能够成功 Vue 前端渲染创设和 Node 层营造。

'use strict';
const path = require('path');
module.exports = {
  egg: true,
  framework: 'vue',
  entry: {
    include: ['app/web/page', { 'app/app': 'app/web/page/app/app.js?loader=false' }],
    exclude: ['app/web/page/[a-z] /component', 'app/web/page/test', 'app/web/page/html', 'app/web/page/app'],
    loader: {
      client: 'app/web/framework/vue/entry/client-loader.js',
      server: 'app/web/framework/vue/entry/server-loader.js',
    }
  },
  alias: {
    server: 'app/web/framework/vue/entry/server.js',
    client: 'app/web/framework/vue/entry/client.js',
    app: 'app/web/framework/vue/app.js',
    asset: 'app/web/asset',
    component: 'app/web/component',
    framework: 'app/web/framework',
    store: 'app/web/store'
  }
};
app.react.render = (name, locals, options) = { const filePath = path.isAbsolute(name) ? name : path.join(app.config.view.root[0], name); const promise = app.webpack.fileSystem.readWebpackMemoryFile(filePath, name); return co(function* () { const code = yield promise; if (!code) { throw new Error(`read webpack memory file[${filePath}] content is empty, please check if the file exists`); } // dynamic execute javascript const wrapper = NativeModule.wrap(code); vm.runInThisContext(wrapper)(exports, require, module, __filename, __dirname); const reactClass = module.exports; if (options  options.markup) { return Promise.resolve(app.react.renderToStaticMarkup(reactClass, locals)); } return Promise.resolve(app.react.renderToString(reactClass, locals)); });};

本地开辟与线上解耦

我们通晓,在本地开垦时,大家都会用 Webpack 热更新成效. 而 Webpack 热更新实现是依赖内部存款和储蓄器编译实现的。
在线上运营时,大家得以直接读取营造好的JSBundle文件,那么在地头开发时,在 Egg 服务端渲染时,如何获取到 JSBundle文件 内容时, 相同的时间又不耦合线上代码。
这里大家结合 Egg Webpack 热更新实现 里面提到插件 egg-webpack ,该插件在 egg app上下文提供了 app.webpack.fileSystem 实例,我们得以依据文件名得到到 Webpack编写翻译的内存文件内容。有了这一步,为大家本地开采从 Webpack 内部存款和储蓄器里面实时读取文件内容提供了扶植。至于不耦合线上代码线上代码的主题材料我们能够单独编写制定一下插件,覆盖 egg-view-vue 暴光的 engine renderBundle 方法。具体落到实处请看如下完结。

if (app.vue) {
    const renderBundle = app.vue.renderBundle;
    app.vue.renderBundle = (name, context, options) => {
      const filePath = path.isAbsolute(name) ? name : path.join(app.config.view.root[0], name);
      const promise = app.webpack.fileSystem.readWebpackMemoryFile(filePath, name);
      return co(function* () {
        const content = yield promise;
        if (!content) {
          throw new Error(`read webpack memory file[${filePath}] content is empty, please check if the file exists`);
        }
        return renderBundle.bind(app.vue)(content, context, options);
      });
    };
  }

遵照上述完结,大家封装了 egg-webpack-vue 插件,用于 Egg Webpack Vue 本地开垦方式。

Worker 监听Webpack编写翻译状态, 检查实验Webpack 编写翻译是还是不是产生, 假若未产生, 呈现Webpack 编写翻译Loading, 假使编写翻译完毕, 自动张开浏览器

项目搭建

有了上边包车型客车 3 个渲染相关的 Egg 插件和 easywepback-vue 营造插件, 该怎么样搭建二个依照 Egg Webpack Vue 的服务端渲染工程项目呢?
类别你能够通过 easywebpack-cli 直接最早化就可以成功只怕clone egg-vue-webpack-boilerplate。上边说贝拉米(Bellamy卡塔尔国下从零怎样搭建三个Egg Webpack Vue 的服务端渲染工程项目。

  • 通过 egg-init 初始化 egg 项目
egg-init egg-vue-ssr
// choose Simple egg app
  • 安装 easywebpack-vue 和 egg-webpack
npm i easywebpack-vue --save-dev
npm i egg-webpack --save-dev
  • 安装 egg-view-vue 和 egg-view-vue-ssr
npm i egg-view-vue --save
npm i egg-view-vue-ssr --save
  • 加上配备

在 ${app_root}/config/plugin.local.js 增添如下配置

exports.webpack = {
  enable: true,
  package: 'egg-webpack'
};

exports.webpackvue = {
  enable: true,
  package: 'egg-webpack-vue'
};
  1. 在 ${app_root}/config/config.local.js 加多如下配置
const EasyWebpack = require('easywebpack-vue');
// 用于本地开发时,读取 Webpack 配置,然后构建
exports.webpack = {
  webpackConfigList: EasyWebpack.getWebpackConfig()
};
  • 配置 ${app_root}/webpack.config.js
'use strict';
const path = require('path');
module.exports = {
  egg: true,
  framework: 'vue',
  entry: {
    include: ['app/web/page', { 'app/app': 'app/web/page/app/app.js?loader=false' }],
    exclude: ['app/web/page/[a-z] /component', 'app/web/page/test', 'app/web/page/html', 'app/web/page/app'],
    loader: {
      client: 'app/web/framework/vue/entry/client-loader.js',
      server: 'app/web/framework/vue/entry/server-loader.js',
    }
  },
  alias: {
    server: 'app/web/framework/vue/entry/server.js',
    client: 'app/web/framework/vue/entry/client.js',
    app: 'app/web/framework/vue/app.js',
    asset: 'app/web/asset',
    component: 'app/web/component',
    framework: 'app/web/framework',
    store: 'app/web/store'
  },
  loaders: {
    eslint: false,
    less: false, // 没有使用, 禁用可以减少npm install安装时间
    stylus: false // 没有使用, 禁用可以减少npm install安装时间
  },
  plugins: {
    provide: false,
    define: {
      args() { // 支持函数, 这里仅做演示测试,isNode无实际作用
        return {
          isNode: this.ssr
        };
      }
    },
    commonsChunk: {
      args: {
        minChunks: 5
      }
    },
    uglifyJs: {
      args: {
        compress: {
          warnings: false
        }
      }
    }
  }
};
  • 地面运维

node index.js 或 npm start

  • Webpack 编写翻译文件到磁盘

// 首先安装 easywebpack-cli 命令行工具
npm i easywebpack-cli -g
// Webpack 编写翻译文件到磁盘
easywebpck build dev/test/prod

Webpack编写翻译完毕, Agent 发送音讯给Worker, Worker检查测量检验到编译完结, 自动张开浏览器, Egg服务标准可用

类型开支

  1. 本地服务端渲染页面访谈

    npm run dev

服务端渲染

在app/web/page 目录下边制造 home 目录, home.vue 文件, Webpack自动根据.vue 文件创立entry入口, 具体贯彻请见 webpack.config.js

  • home.vue 编写分界面逻辑, 根成分为layout(自定义组件, 全局注册, 统一的html, meta, header, body卡塔尔国
<template>
  <layout title="基于egg-vue-webpack-dev和egg-view-vue插件的工程示例项目" description="vue server side render" keywords="egg, vue, webpack, server side render">
   {{message}}
  </layout>
</template>
<style>
  @import "home.css";
</style>
<script type="text/babel">

  export default {
    components: {

    },
    computed: {

    },
    methods: {

    },
    mounted() {

    }
  }
</script>
  • 创建controller文件home.js
exports.index = function* (ctx) {
  yield ctx.render('home/home.js', { message: 'vue server side render!' });
};
  • 增加路由安插
app.get('/home', app.controller.home.home.index);

浏览器输入UEnclaveL央求地址, 然后 Egg 选择到央求, 然后进来 Controller

前端渲染

  • 创建controller文件home.js
exports.client = function* (ctx) {
  yield ctx.renderClient('home/home.js', { message: 'vue server side render!' });
};
  • 增添路由布署
app.get('/client', app.controller.home.home.client);

更加多实施请参见骨架项目:egg-vue-webpack-boilerplate

Node层获取数据后(Node通过艺术调用Java后端API数据接口卡塔尔(قطر‎, 步向模板render流程

运维原理

进去render流程后, 通过worker进度通过调用app.messenger.sendToAgent发送文书名给Agent进程, 同有时间经过app.messenger.on运维监听监听agent发送过来的消

地方运维形式

必发88官网 1

egg-webpack.jpg

  • 率施夷光行node index.js 只怕 npm start 运营 Egg应用
  • 在Egg Agent 里面运行koa服务, 相同的时间在koa服务内部运转Webpack编写翻译服务
  • 挂载Webpack内部存款和储蓄器文件读取方法覆盖当三步跳件读取的逻辑
  • Worker 监听Webpack编写翻译状态, 检验Webpack 编译是不是形成, 若是未成功, 展现Webpack 编写翻译Loading, 如若编写翻译完毕, 自动张开浏览器
  • Webpack编写翻译实现, Agent 发送音信给Worker, Worker质量评定到编写翻译完结, 自动张开浏览器, Egg服务标准可用

Agent进度取获得文件名后, 从Webpack编写翻译内部存款和储蓄器里面获取文件内容, 然后Agent 通过agent.messenger.sendToApp把文件内容发送给Worker进程

必发88官网,地面开辟服务端渲染页面访谈

必发88官网 2

egg-webpack-dev.jpg

  • 浏览器输入ULX570L必要地址, 然后Egg接纳到央求, 然后跻身Controller
  • Node层获取数据后(Node通过http/rpc形式调用Java后端API数据接口卡塔尔国, 踏入模板render流程
  • 步向render流程后, 通过 worker 进程经过调用 app.messenger.sendToAgent 发送文书名给Agent进度, 同时通过 app.messenger.on 运行监听监听agent发送过来的消
  • Agent进程取得到文件名后, 从 Webpack 编写翻译内部存款和储蓄器里面获得文件内容, 然后Agent 通过 agent.messenger.sendToApp 把公文内容发送给Worker进程
  • Worker进度获取到剧情现在, 进行Vue编写翻译HTML, 编译成HTML后, 步入jss/css财富依赖流程
  • 如果开发银行代理形式(见easywebpack的setProxy卡塔尔(قطر‎, HTML间接注入相对路线的JS/CSS, 如下

页面能够平昔动用 /public/client/js/vendor.js 绝对路线, /public/client/js/vendor.js 由后端框架代理转发到webpack编写翻译服务, 然后归来内容给后端框架, 这里涉及多少个利用通讯. 如下:

<link rel="stylesheet" href="/public/client/css/home/android/home.css"> 
<script type="text/javascript" src="/public/client/js/vendor.js"></script>
<script type="text/javascript" src="/public/client/js/home.js"></script>

万风度翩翩非代理格局(见easywebpack的setProxyState of Qatar, HTML直接注入必需是相对路线的JS/CSS, 如下:
页面必得选用 http://127.0.0.1:9001/public/client/js/vendor.js 相对路径

<link rel="stylesheet" href="http://127.0.0.1:9001/public/client/css/home/android/home.css"> 
<script type="text/javascript" src="http://127.0.0.1:9001/public/client/js/vendor.js"></script>
<script type="text/javascript" src="http://127.0.0.1:9001/public/client/js/home.js"></script>

其中 是 Agent里面运行的Webpack编写翻译服务地点, 与Egg应用地址是三回事
末段, 模板渲染完成, 服务器输出HTML内容给浏览器

  • 发表格局营造流程和周转方式
  • Webpack通过本地创设大概ci直接构建好服务端和顾客端渲染文件到磁盘
  • Egg render直接读取当麻芋果件, 然后渲染成HTML
  • 按照manfifest.json 文件注入 jss/css能源正视注入
  • 模板渲染实现, 服务器输出HTML内容给浏览器.

egg-vue-webpack-boilerplate 基于egg-view-vue, egg-view-vue-ssr, egg-webpack, egg-webpack-vue插件的多页面和单页面服务器渲染同构工程骨架项目, 贴两张截图:

必发88官网 3

vue-mutil-page.png

必发88官网 4

vue-single-page.png

Worker进度获取到内容现在, 实行React编写翻译HTML, 编写翻译成HTML后, 步向jss/css能源信任流程

扶植特色

要是开发银行代理方式(见easywebpack的setProxy卡塔尔, HTML间接流入相对路线的JS/CSS, 如下:

1.特性

  • 支撑服务端渲染, 前端渲染, 静态页面渲染三种方法,

  • 援救单页面, 多页面服务端渲染,前端渲染形式

  • 支撑 server 和 client 端代码修正, Webpack 时时编写翻译和热更新, npm start 生机勃勃键运维应用

  • 听他们说 vue axios 多页面服务端渲染, 顾客端渲染同构已毕

  • 基于 vue vuex vue-router axios 单页面服务器顾客端同构完毕

  • 基于easywebpack根底配置, 使用es6 class 世襲格局编写webpack配置 和 cli 营造

  • 支撑Js/Css/Image能源注重, 内置帮助CDN性子

  • 协助css/sass/less样式编写

  • 协理根据.vue文件自动创设entry入口文件

  • 支撑Vue组件异步加载, 具体实例请看app/web/page/dynamic

  • 扶持vue 2.3 官方VueSSRPlugin实现方案,代码分支feature/VueSSRPlugin

  • 支撑Node 4 以上版本, 包含Node 8 版本的async和await性格

页面能够直接利用/public/client/js/vendor.js相对路线, /public/client/js/vendor.js由后端框架代理转载到webpack编写翻译服务, 然后回来内容给后端框架, 这里提到三个使用通讯. 如下:

连带插件和工程

  • easywebpack Webpack 基本功配置骨架
  • easywebpack-vue Vue构建施工方案
  • egg-view-vue egg view plugin for vue.
  • egg-view-vue-ssr vue server side render solution for egg-view-vue.
  • egg-webpack webpack dev server plugin for egg, support read file in memory and hot reload.
  • egg-webpack-vue egg webpack building solution for vue.
  • egg-vue-webpack-boilerplate 基于egg-view-vue, egg-view-vue-ssr, egg-webpack, egg-webpack-vue插件的多页面和单页面服务器渲染同构工程骨架项目
linkrel="stylesheet"href="/public/client/css/home/android/home.css"

script type="text/javascript" src="/public/client/js/vendor.js"/scriptscript type="text/javascript" src="/public/client/js/home.js"/script

借使非代理方式(见easywebpack的setProxy卡塔尔国, HTML直接注入必需是相对路线的JS/CSS, 如下:

页面必得选择相对路线

linkrel="stylesheet"href=""

script type="text/javascript" src=""/scriptscript type="text/javascript" src=""/script

其间 是 Agent里面运转的Webpack编写翻译服务地点, 与Egg应用地址是四回事

末段, 模板渲染实现, 服务器输出HTML内容给浏览器.

3. 行业内部遇到公布方式营造流程和周转形式Webpack通过地面创设大概ci直接创设好服务端文件和客商端财富文件到磁盘Egg render直接读取当守田件, 然后渲染成 HTML依据manfifest.json文件注入 jss/css能源信任注入模板渲染实现, 服务器输出HTML内容给浏览器.4. 关于 Egg 框架中的 Agent 和 Worker大家应用本土开荒纠正Node层代码修复重启时, 只会重启Worker进度, 不会重启Agent进度, 我们得以在Agent里面运转Webpack编写翻译服务化解Webpack compiler实例难点.因为Egg App进度 和 Agent进度是多个经过, 当url访谈时, 大家透过worker发送音信给agent进度, 获取服务端渲染的公文内容, 然后Agent再发送消息给Worker杀绝文件读取难点.本地开拓webpack热更新内部存款和储蓄器存款和储蓄读取和线上应用本机文件读取逻辑抽离效能, 大家因此地面开荒方式时, 通过读取Webpack内存内容覆盖当半夏件读取的逻辑, 那样在开采形式和揭穿方式能够无缝对接.worker和agent通讯机制:-cn/core/cluster-and-ipc.html达成egg项目服务器代码改进项目活动重启的效率能够应用egg-development插件.5.项目和插件egg-react-webpack-boilerplate基于easywebpack-react和egg-view-react(ssr卡塔尔插件的工程骨架项目easywebpack-reactWebpack React 营造筑工程程化方案.easywebpack-cliWebpack 创设筑工程程化脚手架.egg-view-react-ssrreact ssr 解决方案.egg-webpack本地开荒热更新使用.egg-webpack-react本地开采渲染内部存款和储蓄器读取援助插件

本文由必发88官网发布,转载请注明来源:服务端渲染工程化建设,SSLX570服务端渲染Webpac