Vue处事端渲染实践 ——Web应用首屏耗时最优化方案

产物情形下，打包后的客户端和处事端的Bundle会存储为vue-ssr-client-manifest.json与vue-ssr-server-bundle.json，通过文件流模块fs读取即可，但在开拓情形下，我建设了一个appSSR模块，在产生代码变动时，会触发Webpack热更新，appSSR对应的bundle也会更新，appSSR模块代码如下所示：

let clientManifest;  
let bundle;  
const appSSR = {  
  get bundle() {  
    return bundle;  
  },  
  set bundle(val) {  
    bundle = val;  
  },  
  get clientManifest() {  
    return clientManifest;  
  },  
  set clientManifest(val) {  
    clientManifest = val;  
  }  
};  
module.exports = appSSR; 

通过引入appSSR模块，在开拓情形下，就可以拿到clientManifest和ssrBundle，项目标渲染中间件如下：

const fs = require('fs');  
const path = require('path');  
const ejs = require('ejs');  
const vue = require('vue');  
const vssr = require('vue-server-renderer');  
const createBundleRenderer = vssr.createBundleRenderer;  
const dirname = process.cwd();  
const env = process.env.RUN_ENVIRONMENT;  
let bundle;  
let clientManifest;  
if (env === 'development') {  
  // 开拓情形下，通过appSSR模块，拿到clientManifest和ssrBundle  
  let appSSR = require('./../../core/app.ssr.js');  
  bundle = appSSR.bundle;  
  clientManifest = appSSR.clientManifest;  
} else {  
  bundle = JSON.parse(fs.readFileSync(path.resolve(__dirname, './dist/vue-ssr-server-bundle.json'), 'utf-8'));  
  clientManifest = JSON.parse(fs.readFileSync(path.resolve(__dirname, './dist/vue-ssr-client-manifest.json'), 'utf-8'));  
}  
module.exports = async function(ctx) {  
  ctx.status = 200;  
  let html;  
  let context = await ctx.getTplContext();  
  ctx.logger('进入SSR，context为： ', JSON.stringify(context));  
  const tpl = fs.readFileSync(path.resolve(__dirname, './newTemplate.html'), 'utf-8');  
  const renderer = createBundleRenderer(bundle, {  
    runInNewContext: false,  
    template: tpl, // （可选）页面模板  
    clientManifest: clientManifest // （可选）客户端构建 manifest  
  });  
  ctx.logger('createBundleRenderer  renderer：', JSON.stringify(renderer));  
  try {  
    html = await renderer.renderToString({  
      ...context,  
      url: context.CTX.url,  
    });  
  } catch(err) {  
    ctx.logger('SSR renderToString 失败： ', JSON.stringify(err));  
    console.error(err);  
  }  
  ctx.body = html;  
}; 

怎样对现有项目举办改革？

根基目次改革

行使Webpack来处理赏罚处事器和客户端的应用措施，大部门源码可以行使通用方法编写，可以行使Webpack支持的全部成果。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!