Vue SPA首屏加载缓慢问题解决方案

问题背景

当我们使用Vue框架开发SPA应用时，通常都会遇到首屏加载缓慢的问题，这会影响用户的体验，造成用户的流失。这是因为，在Vue SPA的实现中，前端的路由跳转会请求多个JS文件，而这些JS文件最终都会合并成一个JS文件，再由浏览器渲染展示。

问题分析

Vue SPA首屏加载缓慢的问题，主要是因为前端路由跳转需要请求多个JS文件，随着项目越来越复杂，JS文件的数量可能越来越多，这样不仅增加了请求的时间，而且打包后的JS文件也会变得巨大。

解决方案

针对Vue SPA首屏加载缓慢的问题，可以采取以下几个方案：

方案一：代码切割

通过webpack的代码切割技术，将前端路由跳转需要的文件切割成小块，实现按需加载。在webpack中配置使用splitChunks插件即可，这个插件会将代码切割成小块，并使用异步加载的方式按需加载。

例如，在vue.config.js文件中进行配置：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all', // async表示只对异步代码进行分割，all表示同时对同步和异步代码进行分割
        minSize: 30000, // 模块的最小体积，默认值是30kb
        maxSize: 0, // 当模块超过maxSize时会进行分割，默认值是0，不限制大小
        minChunks: 1, // 模块被用到的最小次数，默认为1
        maxAsyncRequests: 5, // 允许同时加载的模块数，设置为1表示按需加载，默认为5
        maxInitialRequests: 3, // 入口文件引用的模块数最大值，默认为3
        automaticNameDelimiter: '~', // 自动命名分割符
        name: true, // 默认情况下，webpack会自动命名分割后的代码块，如果设置为true则使用默认命名规则
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/, // 用于控制切割哪些模块，此处配置切割node_modules目录下的模块
            priority: -10 // 如果模块同时匹配多个cacheGroup，则会按照权重进行分组，权重越大，优先级越高
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true // 如果一个模块已经被打包过了，那么将不会被重新打包，而是直接使用原有的模块
          }
        }
      }
    }
  }
}

方案二：Skeleton Screen骨架屏技术

将骨架屏作为Vue SPA首屏的展示方式，先快速展示页面的基本结构和布局，再去获取数据渲染页面内容。这种方式可以增加用户的等待时间的舒适度，让等待过程变得更生动有趣。

例如，在App.vue文件中使用骨架屏技术：

<template>
  <div id="app">
    <div v-if="loading" class="skeleton">
      <!-- 骨架屏的HTML结构 -->
    </div>
    <div v-else>
      <!-- 真实内容的HTML结构 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  created() {
    // 请求数据
    fetchData().then(() => {
      this.loading = false
    })
  }
}
</script>