html2pdf 缓存,Nuxt页面级缓存的实现.pdf

Nuxt页页面面级级缓缓存存的的实实现现

虽然 V ue 的服务器端渲染 (SSR) 相当快速，但是由于需要为每次请 为了避免交叉请 状态污染，都创建一个新的根V ue实例

，创建组件实例和虚拟 DOM 节点的开销，无法与纯基于字符串拼接的模板的性能相当。在 SSR 性能至关重要的情况下，明智

地利用缓存策略，可以极大改善响应时间并减少服务器负载。同时还可以大大减少后端接口服务器的负载。

在 vue SSR指南 中，缓存有两种，分为页面级缓存和组件级缓存。本次讲的是页面缓存，如果内容不是用户特定的并且在相对

较短时间内，页面内容不需要更新。我们就可以使用页面缓存。对于页面级缓存我们可以通过这段koa服务器的代码大概知道缓

存的思路：

1 const microCache = LRU({

2 max: 100

3 maxAge: 1000 // 重要提示：条目在 1 秒后过期。

4 })

5

6 const isCacheable = req => {

7 // 实现逻辑为，检查请 是否是用户特定(user-specific)。

8 // 只有非用户特定 (non-user-specific) 页面才会缓存

9 }

10

11 server.get('*' (req res) => {

12 const cacheable = isCacheable(req)

13 if (cacheable) {

14 const hit = microCache.get(req.url)

15 if (hit) {

16 return res.end(hit)

17 }

18 }

19

20 renderer.renderToString((err html) => {

21 res.end(html)

22 if (cacheable) {

23 microCache.set(req.url html)

24 }

25 })

26 })

流程图如下：

上面的代码为vue的ssr渲染提供了方案，但是对于使用nuxt框架的同学而言，用脚手架初始化完，框架对于vue服务端渲染的res.

end()函数做了高度封装，从下图nuxt在接收到请 后进行渲染的流程可以看出，nuxt主要是通过nuxtMiddleware调用renderRou

te()来进行渲染的：

那么我们是否可以通过重写renderRoute()这个api拦截其内部渲染逻辑，在渲染之前加上缓存呢？ nuxt-ssr-cache 插件已经这样

做了。我们来看一下这个nuxt模块核心部分的源码：

1 const renderer = nuxt.renderer;

2 const renderRoute = renderer.renderRoute.bind(renderer);

3 renderer.renderRoute = function(route context) {

4 // hopefully cache reset is finished up to this point.

5 tryStoreVersion(cache currentVersion);

6

7 const cacheKey = (config.cache.key || defaultCacheKeyBuilder)(route context);

8 if (!cacheKey) return renderRoute(route context);

9

10 function renderSetCache(){

11 return renderRoute(route context)

12 .then(function(result) {

13 if (!result.error) {

14 cache.setAsync(cacheKey serialize(result));

15 }

16 return r