首屏哪些地方可以优化呢？Vue首屏优化，白屏是什么，怎么优化首页白屏，页面加载时间过长，打包分析，gzip 使用，sus

首先在优化首屏渲染之前，我们得先理解白屏是什么

白屏其实就是用户输入 URL 到请求服务器拿到得数据并解析 DOM 的过程。

用户输入URL，例如 www.baidu.com 。
DNS 解析，浏览器首先会检查本地缓存中是否有该域名的IP地址，有就会用缓存，反之会向 DNS 服务器发送请求，解析对应的 ip 地址。
建立连接，获取对应的 ip 地址之后，浏览器与服务器建立 TCP 连接，这个过程包含三次握手。
发送请求，建立连接之后向服务器发送请求，请求页面资源，服务器响应数据 (HTML文档)。
浏览器解析 HTML文档，构建 DOM 树，遇到样式时，暂停 HTML 解析，下载样式文件，构建样式树。
样式树和DOM树结合，生成渲染树，用来绘制页面。
解析脚本文件，在遇到 script 时，会下载 script 代码，并执行 script 代码，这个过程可能会有回流和重绘。
在样式树和DOM树结合之后，确认DOM的最终结果，浏览器页面将内容绘制到屏幕上。
绘制最终页面，用户看到最终页面结果。

总结：在浏览器解析 head 标签或者渲染 body 标签时，就是白屏的结束点，以上所有的步骤都可能导致延长白屏时间。

(webpack) vue2 打包分析

使用 webpack-bundle-analyzer 打包分析，检查较大的依赖

这里我们以花裤衩(PanJiaChen/vue-element-admin: :tada: A magical vue admin https://panjiachen.github.io/vue-element-admin)为例

创建一个新的文件项目/webpack.config.js

npm i webpack-bundle-analyzer -D
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
if(process.env.NODE_ENV === "production"){
module.exports = {
plugins: [new BundleAnalyzerPlugin()]
}
} else {
module.exports = {}
}

在 vue.config.js 中使用

configureWebpack: require("./webpack.config"),

运行打包命令
优化

移除未使用的依赖
对于较大的依赖可以使用 splitChunksPlugin 拆分，vite 不太好支持
懒加载非立即加载的模块 import()
平替大依赖，例如 lodash-es 和 lodash

GZIP 压缩打包

gzip 所有浏览器都支持，将静态文件或者script文件打包压缩 20%-30%
webpack 配置：

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
  plugins: [
    new CompressionPlugin({
      test: /.(js|css|html|svg)$/,
      threshold: 10240,
    }),
  ],
};

vite 配置：

import compressPlugin from 'vite-plugin-compression';
export default defineConfig({
  plugins: [
    compressPlugin({
      ext: '.gz',
      algorithm: 'gzip',
      deleteOriginFile: false,
    }),
  ],
});

减少首页请求

确保浏览器的请求数量不会大于浏览器的最大请求数，否则会排队请求。
对于大数据的首页请求，可以使用骨架屏，或者使用打包数据。

懒加载

对于多模块下，可以使用 const MyComponent = import("xxx")
也可以使用 Vue3 Suspence 组件来配合异步加载组件

    <Suspence>
        <template #default>
            <MyComponent />
        </template>
        <template #fallback>
            组件加载中...
        </template>
    </Suspence>