您的位置: 首页  >  文章  >  Nuxt 实现的 SSR 页面性能优化的进一步探索与实践

Nuxt 实现的 SSR 页面性能优化的进一步探索与实践

分类: 文章 • 2024-01-09 15:41:28

（给前端大全加星标，提升前端技能）


转自：大转转FE/王金录

前言

本文之前，先简单介绍以下几个概念:

SSR指服务端渲染，即页面是通过服务端渲染生成后返回给客户端的，SSR主要为了提高页面加载速度，改善用户体验，也可用于SEO搜索引擎优化。

Nuxt.js 官方定义： Nuxt.js 是一个基于 Vue 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

个人理解：Nuxt.js 就是预设了开发服务端渲染应用所需要的各种配置, 使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架。

背景

我们部门从事的都是面对用户的业务需求开发，面对用户，意味着对页面的体验要求会更高，最直观体验是页面首屏的加载速度，加载速度优化是我们体验优化的长期、重要的一部分；本文的起源正是首屏加载速度优化。

页面加载速度优化的核心包括三点：减少资源文件的请求数量；减小每个资源文件的大小；提高每个资源的加载速度；

诸如合并API访问，压缩混淆文件，支持webp图片，资源cdn缓存等等常用办法，都是以上面三个核心为出发点的； 这些常用办法基本都可以通过webpack配置，公司基础服务，代码较小的变更完成。

我们负责的各主流量入口页面，已基本做过以上常用的优化，但由于主入口页面资源量较大的原因，优化后并不能达到预期的效果，我们需要探索其它优化方案。 我们快速想到了用SSR的方案进一步解决加载速度问题，从零开始的搭建服务端渲染应用相当复杂，肯定会涉及到服务端的开发，作为独立的前端团队，成本较高昂； 我们决定尝试是否能找到一种成本较低的现有SSR框架，以达到目的；

因主入口页面技术栈为vue，方案调研中自然而然的看到了Nuxt.js此种基于Vue的SSR框架； Nuxt.js和项目技术栈匹配度急高，学习成本极低，自然成为我们的第一选择；

我们引入Nuxt.js，最初只是利用了服务端异步获取API接口数据和服务端渲染两项功能，去重构了我们的项目，重构后效果基本达到我们的预期，正常网络状态下，基本可以达到秒开； 入口页面，团队是作为一个长期的项目进行不定期优化的，我们逐步围绕Nuxt.js框架，对项目做了进一步优化升级，本文主要介绍我们Nuxt.js页面优化的进一步探索与实践； 至于如何搭建初步的Nuxt项目，需要感兴趣的各位自行查看官方文档及自我实践了，本文不做赘述。

探索与实践

我们主要的探索与实践可行方向主要有两个：

一、Nuxt.js特性合理应用

应用到的特性主要包括asyncData异步获取数据、mounted不支持服务端渲染、no-ssr组件不在服务端渲染中呈现；

通过相关特性做到API数据和页面结构合理拆分，首屏所需数据和结构通过服务端获取并渲染，非首屏数据和结构通过客户端获取并渲染。

示例代码：

no-ssr结构拆分



    

  1. <template>
    2. 

  2.  <div>
    3. 

  3.  <!-- 顶部banner -->
    4. 

  4.  <banner :banner="banner" />
    5. 

  5.  <!-- 非首屏所需结构，通过no-ssr组件达到不在服务端渲染目的-->
    6. 

  6.  <no-ssr>
    7. 

  7.  <!-- 商品列表 -->
    8. 

  8.  <prod-list :listData="listData"/>
    9. 

  9.  </no-ssr>
    10. 

  10.  </div>
    11. 

  11. </template>
    12. 



API数据拆分




    

  1. export default {
    2. 

  2.  async asyncData({ app, query }) {
    3. 

  3.  try {
    4. 

  4.  // 获取页面顶部轮播图信息
    5. 

  5.  const getBanner = () => {
    6. 

  6.  return app.$axios.$get('zz/zy/banner')
    7. 

  7.  }
    8. 

  8.  // 获取底部配置信息
    9. 

  9.  const getFooter = () => {
    10. 

  10.  return app.$axios.$get('zz/zy/footer', {
    11. 

  11.  params: {
    12. 

  12.  smark: query.smark
    13. 

  13.  }
    14. 

  14.  })
    15. 

  15.  }
    16. 

  16.  // 并发获取首屏数据，服务端获取
    17. 

  17.  const [banner, footer] = await Promise.all([getBanner(), getFooter()])
    18. 

  18.  return {banner: banner, footer: footer}
    19. 

  19.  } catch (e) {
    20. 

  20.  console.log('interface timeout or format error => ', e)
    21. 

  21.  return {}
    22. 

  22.  }
    23. 

  23.  },
    24. 

  24.  mounted() {
    25. 

  25.  // 非首屏使用的数据, 客户端获取
    26. 

  26.  this.loadListData()
    27. 

  27.  },
    28. 

  28.  methods: {
    29. 

  29.  loadListData() {
    30. 

  30.  this.$axios.$get('zz/zy/list').then(() => {
    31. 

  31.  // 数据处理逻辑
    32. 

  32.  })
    33. 

  33.  }
    34. 

  34.  }
    35. 

  35. }
    36. 



二、服务端引入缓存


服务端开发意味着缓存可作为性能优化的最直接法门，Nuxt.js作为一种服务端渲染框架，也不例外；针对不同的页面，不同的数据状态，可主要区分为下面三类缓存：


1、API接口数据缓存


将服务端获取的数据，全部缓存到node进程内存中，定时刷新，有效期内请求都通过缓存获取API接口数据，减小数据获取时间；


此种缓存适用于缓存的部分API数据，基本保持不变，变更不频繁，与用户个人数据无关。


示例代码：




    

  1.  import LRU from 'lru-cache'
    2. 

  2.  const CACHED = new LRU({
    3. 

  3.  max: 100, // 缓存队列长度
    4. 

  4.  maxAge: 1000 * 60 // 缓存时间
    5. 

  5.  })
    6. 

  6.  export default {
    7. 

  7.  async asyncData({ app, query }) {
    8. 

  8.  try {
    9. 

  9.  let banner, footer
    10. 

  10.  if (CACHED.has('baseData')) {
    11. 

  11.  // 存在缓存，使用缓存数据
    12. 

  12.  let data = CACHED.get('baseData')
    13. 

  13.  data = JSON.parse(data)
    14. 

  14.  banner = data.banner
    15. 

  15.  footer = data.footer
    16. 

  16.  } else {
    17. 

  17.  // 获取页面顶部轮播图信息
    18. 

  18.  const getBanner = () => {
    19. 

  19.  return app.$axios.$get('zz/zy/banner')
    20. 

  20.  }
    21. 

  21.  // 获取底部配置信息
    22. 

  22.  const getFooter = () => {
    23. 

  23.  return app.$axios.$get('zz/zy/footer', {
    24. 

  24.  params: {
    25. 

  25.  smark: query.smark
    26. 

  26.  }
    27. 

  27.  })
    28. 

  28.  }
    29. 

  29.  [banner, footer] = await Promise.all([getBanner(), getFooter()])
    30. 

  30.  // 将数据写入缓存
    31. 

  31.  CACHED.set('baseData', JSON.stringify({ banner: banner, footer: footer}))
    32. 

  32.  }
    33. 

  33.  return {mods: mods, footer: footer}
    34. 

  34.  } catch (e) {
    35. 

  35.  console.log('interface timeout or format error => ', e)
    36. 

  36.  return {}
    37. 

  37.  }
    38. 

  38.  }
    39. 

  39.  }
    40. 



2、组件级别缓存


将渲染后的组件DOM结构存入缓存，定时刷新，有效期通过缓存获取组件DOM结构，减小生成DOM结构所需时间；


适用于渲染后结构不变或只有几种变换、并不影响上下文的组件。


示例代码：


nuxt.config.js配置项修改




    

  1. const LRU = require('lru-cache')
    2. 

  2. module.exports = {
    3. 

  3.  render: {
    4. 

  4.  bundleRenderer: {
    5. 

  5.  cache: LRU({
    6. 

  6.  max: 1000, // 缓存队列长度
    7. 

  7.  maxAge: 1000 * 60 // 缓存1分钟
    8. 

  8.  })
    9. 

  9.  }
    10. 

  10.  }
    11. 

  11. }
    12. 



需要做缓存的 vue 组件， 需增加 name 以及 serverCacheKey 字段，以确定缓存的唯一键值。




    

  1. export default {
    2. 

  2.  name: 'zzZyHome',
    3. 

  3.  props: ['type'],
    4. 

  4.  serverCacheKey: props => props.type
    5. 

  5. }
    6. 



如果组件依赖于很多的全局状态，或者状态取值非常多，缓存会因频繁被设置而导致溢出，这样的组件做缓存就没有多大意义了；


另外组件缓存，只是缓存了dom结构，如created等钩子中的代码逻辑并不会被缓存，如果其中逻辑会影响上下边变更，是不会再执行的，此种组件也不适合缓存。


3、页面整体缓存


当整个页面与用户数据无关，依赖的数据基本不变的情况下，可以对整个页面做缓存，减小页面获取时间;


页面整体缓存前提是在使用Nuxt.js脚手架工具create-nuxt-app初始化项目时，必须选择集成服务器框架，如express、koa，只有这样才具有服务端中间件扩展的功能。


示例代码：


服务端中间件middleware/page-cache.js




    

  1. const LRU = require('lru-cache')
    2. 

  2. let cachePage = new LRU({
    3. 

  3.  max: 100, // 缓存队列长度
    4. 

  4.  maxAge: 1000 * 60 // 缓存1分钟
    5. 

  5. })
    6. 

  6. export default function(req, res, next){
    7. 

  7.  let url = req._parsedOriginalUrl
    8. 

  8.  let pathname = url.pathname
    9. 

  9.  // 通过路由判断，只有首页才进行缓存
    10. 

  10.  if (['/home'].indexOf(pathname) > -1) {
    11. 

  11.  const existsHtml = cachePage.get('homeData')
    12. 

  12.  if (existsHtml) {
    13. 

  13.  return res.end(existsHtml.html, 'utf-8')
    14. 

  14.  } else {
    15. 

  15.  res.original_end = res.end
    16. 

  16.  // 重写res.end
    17. 

  17.  res.end = function (data) {
    18. 

  18.  if (res.statusCode === 200) {
    19. 

  19.  // 设置缓存
    20. 

  20.  cachePage.set('homeData', { html: data})
    21. 

  21.  }
    22. 

  22.  // 最终返回结果
    23. 

  23.  res.original_end(data, 'utf-8')
    24. 

  24.  }
    25. 

  25.  }
    26. 

  26.  }
    27. 

  27.  next()
    28. 

  28. }
    29. 



nuxt.config.js配置项修改，引入服务端中间件




    

  1. //针对home路由做缓存
    2. 

  2. serverMiddleware: [
    3. 

  3.  { path: '/home', handler: '~/middleware/page-cache.js' },
    4. 

  4. ]
    5. 



总结


本文主要是针对Nuxt.js框架实现的页面，性能优化方案进一步探索和实践的总结，汇总一些思路与方向；期望各位小伙伴在其它SSR相关页面优化过程中，能起到一定的启发作用。








推荐阅读


（点击标题可跳转阅读）


Vue 项目 SSR 改造实战


细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）


编写支持 SSR 的通用组件指南










觉得本文对你有帮助？请分享给更多人


关注「前端大全」加星标，提升前端技能


Nuxt 实现的 SSR 页面性能优化的进一步探索与实践


好文章，我在看❤️


															

																					

								

									相关推荐