如何解决vue首页加载白屏问题

预渲染

同构

SSR

服务端渲染也可以解决首屏加载慢这个问题，因为服务端会把所有数据全部渲染完成再返回给客户端

ssr =>请求->node->解析 ->吐回给客户端(带请求数据)

但是有一个大问题，重要的是node层，高并发的解决

路由懒加载

{
  path: '/about',
  name: 'about',
  component: () => import('../views/AboutView.vue')
}

quicklink

quicklink就是在浏览器空闲的时候去指定需要加载的数据,这个是谷歌开源的，

使用Gzip压缩

减少文件体积，加快首屏页面打开速度

前提是服务器那边得开启gzip

前端需要做的事：

npm i compression-webpack-plugin -D

vue.config.js

const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
            threshold: 10240, // 归档需要进行压缩的文件大小最小值，我这个是10K以上的进行压缩
            deleteOriginalAssets: false, // 是否删除原文件
            minRatio: 0.8
          })
        ]
      }
    }
  }
}