

首页  思维导图  详情



Vue服务器端渲染

2017-12-14 18:44:33   12  举报





AI智能生成

Vue服务端渲染学习整理的思维导图，后期会继续追加自己的理解

模版推荐

作者其他创作

大纲/内容

head管理

类似于资源注入，通过模版占位符和追加到渲染上下文的动态数据渲染head

缓存

父节点

页面级别缓存

micro-caching

组件级缓存

用什么缓存

LRU

serverCacheKey

何时使用

要注意小心使用组件缓存来解决性能瓶颈

两种情况不应该使用组件缓存

组件具有可能依赖于全局状态的子组件

组件具有对渲染上下文产生副作用的子组件

适用于组件缓存的最常见类型的组件，是在v-for列表中重复出现的组件

流式渲染

优势

会尽快发送数据，可以尽快获得"第一个chunk"，然后将其发送给客户端

不适用的情况

如果你依赖由组件生命周期钩子函数填充的上下文数据，不建议使用流氏传输模式

指南

什么是服务器端渲染

为什么使用服务器端渲染

优势

更好的SEO

更快的内容到达

权衡点

开发条件所限：针对特定生命周期钩子函数的代码和一些外部扩展库

涉及更多的构建和部署要求

更多的服务器端负载，可能需要考虑缓存策略，准备一些服务器负载机制

如何编写通用代码

需要注意的问题

服务器数据响应希望每个请求是独立的全新的，不互相污染

要注意组件生命周期钩子函数的使用

beforeCreated

created

不接受访问特定平台的API，比如window/document

源码结构

避免状态单例，否则状态将在每个传入的请求间共享

构建步骤

注意事项

要区分服务器端和客户端构建

要区分服务器逻辑和客户端逻辑

路由和代码分割

数据预取和状态

是什么

在服务器开始渲染前，需要先预取和解析好一些所需的异步数据 

用什么

使用Vuex进行数据状态管理

怎么用

客户端数据预取

在路由导航之前解析数据

匹配要渲染的视图后，再获取数据

服务端数据预取

store代码拆分

客户端混合

Bundle Renderer

{ createBundleRenderer } = require('vue-server-renderer')

构建配置

服务器配置

扩展说明：external

客户端配置

生成clientManifest：客户端构建清单

手动资源注入

css管理

推荐简单的使用*.vue单文件组件内的<style>

使用vue-style-loader能满足服务端渲染的特殊功能

优势

客户端和服务端通用的编程体验

使用bundleRenderer时自动注入关键css

支持使用extract-text-webpack-plugin进行通用css提取

用法配置点

启动css提取

使用vue-loader的extractCSS选项从*.vue文件中提取css

从依赖模块导入样式

注意

在服务端构建过程中，不应该外置化提取

子主题如果使用 CSS 提取 + 使用 CommonsChunkPlugin 插件提取 vendor，在 extract-text-webpack-plugin 提取 CSS 到 vendor chunk 时将遇到问题。为了应对这个问题，请避免在 vendor chunk 中包含 CSS 文件

 Collect

Get Started

服务器-主线程

 Collect

Get Started

查看优惠券流程图（服务器端）

 Collect

Get Started

服务器

 Collect

Get Started

设计简单聊天服务器





0 条评论

下一页