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

同时，必要在entry-server.js中实现处事器端路由逻辑，行使router.getMatchedComponents要领获取到当前路由匹配的组件，假如当前路由没有匹配到响应的组件，则reject到404页面，不然resolve整个app，用于Vue渲染假造DOM，并行使对应模板天生对应的HTML字符串。

const createApp = require('./app');  
module.exports = context => {  
  return new Promise((resolve, reject) => {  
    // ...  
    // 配置处事器端 router 的位置  
    router.push(context.url);  
    // 比及 router 将也许的异步组件和钩子函数理会完  
    router.onReady(() => {  
      const matchedComponents = router.getMatchedComponents();  
      // 匹配不到的路由，执行 reject 函数，并返回 404  
      if (!matchedComponents.length) {  
        return reject('匹配不到的路由，执行 reject 函数，并返回 404');  
      }  
      // Promise 应该 resolve 应用措施实例，以便它可以渲染  
      resolve(app);  
    }, reject);  
  });  
} 

在处事端预拉取数据

在Vue处事端渲染，本质上是在渲染我们应用措施的"快照"，以是假如应用措施依靠于一些异步数据，那么在开始渲染进程之前，必要先预取息争析好这些数据。处事端Web Server Frame作为署理处事器，在处事端对接口处事提倡哀求，并将数据拼装到全局Vuex状态中。

另一个必要存眷的题目是在客户端，在挂载到客户端应用措施之前，必要获取到与处事器端应用措施完全沟通的数据 - 不然，客户端应用措施会由于行使与处事器端应用措施差异的状态，然后导致殽杂失败。

今朝较好的办理方案是，给路由匹配的一级子组件一个asyncData，在asyncData要领中，dispatch对应的action。asyncData是我们约定的函数名，暗示渲染组件必要预先执行它获取初始数据，它返回一个Promise，以便我们在后端渲染的时辰可以知道什么时辰该操纵完成。留意，因为此函数会在组件实例化之前挪用，以是它无法会见this。必要将store和路由信息作为参数转达进去：

举个例子：

<!-- Lung.vue -->  
<template>  
  <div></div>  
</template>  
<script>  
export default {  
  // ...  
  async asyncData({ store, route }) {  
    return Promise.all([  
      store.dispatch('getA'),  
      store.dispatch('myModule/getB', { root:true }),  
      store.dispatch('myModule/getC', { root:true }),  
      store.dispatch('myModule/getD', { root:true }),  
    ]);  
  },  
  // ...  
}  
</script> 

（编辑：湖南网）

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