nuxt 性能优化——服务端缓存的实现

目的:改善响应时间并减少服务器负载。
适用于:服务器内存少,多次访问会造成服务器卡顿
插件: nuxt-ssr-cache
使用:

  1. 安装插件
npm install nuxt-ssr-cache -S 
or
yarn add nuxt-ssr-cache -S
  1. 在nuxt.config.js中进行配置
// nuxt.config.js
module.exports = {
	version: pkg.version, //如果提供了一个版本 他将会存储在缓存中,当再次部署的时候 将会把旧版本替换为新版本
	modules: [
      'nuxt-ssr-cache'
  	],
  	cache: {
	    useHostPrefix: false, //是否使用主机前缀 如果提供了多个主机名 可以设置为true
	    pages: [ //将要缓存的页面
		
		  //匹配所有页面
		  '/',
		  
	      //可直接写页面的路由路径
	      '/page1',
	 
	      // 可通过正则来匹配路径
	      /^\/page2\/\d+$/,
	 
	      // 使用正则匹配首页
	      /^\/$/
	    ],
	    
	    key(route, context) {
	      return route //return 的route是想要设置缓存的路由 可通过函数来设置想要缓存的路由 如果想跳过缓存可以返回假值
	    },
	 
	    store: { //store 有其他type存储的方式 具体可查看 https://github.com/arash16/nuxt-ssr-cache#readme
	      type: 'memory',
	 
	      //缓存的最大的页面
	      max: 100,
	 
	      // 缓存的时间 到期将过期
	      ttl: 60,
	    },
	  },
}
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Nuxt.js 3 基于 Vite 构建的项目,默认情况下会使用 Vite 的 Server Side Rendering (SSR) 功能进行服务端渲染。在 SSR 模式下,Nuxt.js 3 会使用 Node.js 进程来生成 HTML 文档,并将其发送给客户端进行展示。 为了提高性能和减少服务器负载,Nuxt.js 3 支持服务端缓存,它可以将生成的 HTML 文档缓存到内存或磁盘中,当下次有相同的请求时,直接从缓存中读取 HTML 文档,而不需要重新生成。这样可以大大提高服务器的响应速度和吞吐量。 在 Nuxt.js 3 中,服务端缓存是通过内置的缓存插件 `@nuxtjs/cache` 来实现的。该插件可以将 HTML 文档缓存到内存或磁盘中,并支持多种缓存策略,包括按时间、按请求参数、按请求头等方式进行缓存。 要使用服务端缓存,你需要先安装 `@nuxtjs/cache` 插件: ```bash npm install @nuxtjs/cache ``` 然后在 `nuxt.config.js` 配置文件中添加以下内容: ```js export default { // ... buildModules: ['@nuxtjs/cache'], cache: { pages: [ // 缓存首页和文章页 '/', '/posts/:id' ], store: { type: 'memory' } } } ``` 在上面的示例中,我们首先将 `@nuxtjs/cache` 插件添加到 `buildModules` 中,然后在 `cache` 属性中配置了缓存策略。我们指定了需要缓存的页面路径,包括首页和文章页,缓存的类型是 `memory`,表示将缓存存储在内存中。 当用户访问缓存的页面时,Nuxt.js 3 会先从缓存中读取 HTML 文档,并将其返回给客户端。如果缓存中不存在对应的 HTML 文档,则会重新生成并缓存。 需要注意的是,在使用服务端缓存时,应该特别注意缓存的键名和缓存时间的设置,以免造成缓存混乱或缓存过期的问题。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值