提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

首页加载速度优化与博客列表缓存

博客列表缓存 优化 加载 速度 首页
2023-06-13 09:16:13 时间

    今天初步的完成了首页加载速度的优化和博客列表缓存。前者是为了让游客访问首页更舒服而不用等加载半天，后者是为了减少服务器和浏览器的请求响应次数来减轻彼此的负担。

去除echarts

    经过上次的webpack的analyzer分析，发现即便是按需导入需要的模块，echarts的工具组件合起来依旧很大，约莫3M大小，整体占比高达50%，然而使用的地方仅仅是后台的数据统计部分用到一点，性价比极低，所以这次将echarts模块删除了，并且自己进行绘制图表，立马省了这空间。也蛮好看不是(/▽＼)

axios请求加载

    这次给axios也加上了nprogress的组件来弥补请求加载到响应的空白时间（虽然，貌似，没起到作用？晚点研究吧）

大资源的cdn

    就我网站的另外一个占用资源大的地方就是背景图片和字体文件了，一个字体文件约莫1M多！所以将这些资源搬运到了cdn上加速了。需要更改的链接地方都集中管理了，以后更改也很方便。

博客列表请求缓存

    没错，之前博客页每次到一个分页都会发一次请求，获取当前页的博客列表，当然这样的及时性很高，但是，一个不可忽视的点就是博客的更新频率没有那么高，所以实时性需求也没有那么大。这里就将每次获取页面的列表数据存于vue store中，以后每次再次访问该分页，该页面都会直接返回存于store中的列表数据，这样就避免了无意义的重复请求与响应，此外通过这个，顺带解决了游客看玩一个博文返回后从第一页重头加载的尴尬局面。

import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // for blog
    blogList: [], // [[page,data],[...]]
    blogPage: 1,
    blogTotalSize: 0,
    blogPageSize: 7
  },
  getters: {
    getBlogsByPage (state) {
      let data = []
      state.blogList.forEach(element => {
        if (element[0] === state.blogPage) {
          data = element[1]
        }
      })
      return data
    }
  },
  mutations: {
    inserNewtBlogs (state, data) {
      let exist = false
      state.blogList.forEach((element) => {
        if (element[0] === state.blogPage) {
          exist = true
        }
      })
      if (!exist) {
        state.blogList.push(data)
      }
    },
    changeBlogTotalSize (state, data) {
      state.blogTotalSize = data
    },
    changeBlogPage (state, data) {
      state.blogPage = data
    }
  },
  actions: {
    getBlogList (context) {
      let exist = false
      this.state.blogList.forEach((element) => {
        if (element[0] === this.state.blogPage) {
          exist = true
        }
      })
      if (!exist) {
        axios.post('/api/blog/page',
        `pageNo=${this.state.blogPage}&pageSize=${this.state.blogPageSize}`).then(res => {
          context.commit('inserNewtBlogs', [this.state.blogPage, res.data.data])
        }).catch(err => err)
      }
    },
    getBlogTotalSize (context) {
      if (this.state.blogTotalSize === 0) {
        axios.get('/api/blog/count').then(res => {
          context.commit('changeBlogTotalSize', res.data.data)
        }).catch(err => err)
      }
    }
  }
})

    通过这些捣鼓，首页不带cache加载速度终于<2s啦，带cache甚至可以1s以内迅速响应*★,°*:.☆(￣▽￣)/$:*.°★* 。

    又熬夜到三点了，摸了。

相关文章