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

发布时间：2019-03-22 05:42:13 所属栏目：建站来源：counterxing

导读：副标题#e# 随着各大前端框架的诞生和演变，SPA开始流行，单页面应用的优势在于可以不重新加载整个页面的情况下，通过ajax和服务器通信，实现整个Web应用拒不更新，带来了极致的用户体验。然而，对于需要SEO、追求极致的首屏性能的应用，前端渲染的SPA是糟糕

当服务端使用模板进行渲染时，context.state将作为window.__INITIAL_STATE__状态，自动嵌入到最终的HTML 中。而在客户端，在挂载到应用程序之前，store就应该获取到状态，最终我们的entry-client.js被改造为如下所示：

import createApp from './app';  
const { app, router, store } = createApp();  
// 客户端把初始化的store替换为window.__INITIAL_STATE__  
if (window.__INITIAL_STATE__) {  
  store.replaceState(window.__INITIAL_STATE__);  
}  
if (router) {  
  router.onReady(() => {  
    app.$mount('#app')  
  });  
} else {  
  app.$mount('#app');  
}

常见问题的解决方案

至此，基本的代码改造也已经完成了，下面说的是一些常见问题的解决方案：

在服务端没有window、location对象：

（编辑：西安站长网）

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

13/16

首页

尾页