组件缓存
虽然 Vue 的 SSR 非常快，但由于创建组件实例和 Virtual DOM 节点的成本，它无法与纯粹基于字符串的模板的性能相匹配。在 SSR 性能至关重要的情况下，合理地利用缓存策略可以大大缩短响应时间并减少服务器负载。
使用
- 使用 yarn 或 npm 将
@nuxtjs/component-cache依赖项添加到项目中 - 将
@nuxtjs/component-cache添加到nuxt.config.js的modules部分
{
modules: [
// 简单的用法
'@nuxtjs/component-cache',
// 配置选项
[
'@nuxtjs/component-cache',
{
max: 10000,
maxAge: 1000 * 60 * 60
}
]
]
}
注意：
- 可缓存组件必须定义唯一 name 选项。
- 不应该缓存组件的情况
- 可能拥有依赖global数据的子组件。
- 具有在渲染context中产生副作用的子组件。
要缓存的组件
export default {
name: 'item', // required
props: ['item'],
serverCacheKey: props => props.item.id,
render (h) {
return h('div', this.item.id)
}
}
页面缓存
安装 lru-cache
用到 nuxt.config.js 中的 serverMiddleware
新建服务器端中间件处理缓存文件 pageCache.js
const LRU = require('lru-cache');
export const cachePage = new LRU({
max: 100, // 缓存队列长度 最大缓存数量
maxAge: 1000 * 10, // 缓存时间 单位：毫秒
});
export default function(req, res, next) {
const url = req._parsedOriginalUrl;
const pathname = url.pathname;
// 本地开发环境不做页面缓存(也可开启开发环境进行调试)
if (process.env.NODE_ENV !== 'development') {
// 只有首页才进行缓存
if (['/'].indexOf(pathname) > -1) {
const existsHtml = cachePage.get('indexPage');
if (existsHtml) {
// 如果没有Content-Type:text/html 的 header，gtmetrix网站无法做测评
res.setHeader('Content-Type', ' text/html; charset=utf-8');
return res.end(existsHtml.html, 'utf-8');
} else {
res.original_end = res.end;
res.end = function(data) {
if (res.statusCode === 200) {
// 设置缓存
cachePage.set('indexPage', {
html: data,
});
}
res.original_end(data, 'utf-8');
};
}
}
}
next();
}
在nuxt.config.js中配置serverMiddleware，引入
/*
** 服务器端中间件--针对首页做缓存
*/
serverMiddleware: [
{
path: '/',
handler: '~/utils/server-middleware/pageCache.js',
},
]
清理缓存
如果需要清理缓存，请在 pageCahe.js 添加：
// 清理缓存
if (pathname === '/cleancache') {
cachePage.reset();
res.statusCode = 200;
}
并同样添加到 nuxt.config.js中
{
path: '/cleancache',
handler: '~/utils/server-middleware/pageCache.js',
},
