如何避免Vite搭建的Tauri应用加载时显示无样式标记

针对你遇到的FOUC（Flash of Unstyled Content）问题，这里有几个更优雅的优化方案：

1. 内联关键初始化样式 #

把控制初始元素可见性的核心样式直接写在index.html的<head>标签内，这样HTML加载时就能立刻生效，无需等待外部CSS文件下载：

<head>
  <!-- 其他元标签 -->
  <style>
    /* 隐藏需要初始隐藏的元素 */
    .initial-hidden {
      display: none;
    }
    /* 或者给body设置初始过渡效果，避免整体闪烁 */
    body {
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    /* 页面加载完成后恢复可见 */
    body.loaded {
      opacity: 1;
    }
  </style>
</head>
<body>
  <!-- 页面内容 -->
  <script>
    // DOM加载完成后添加类名触发样式切换
    document.addEventListener('DOMContentLoaded', () => {
      document.body.classList.add('loaded');
    });
  </script>
</body>

2. 利用Tauri启动页（Splashscreen） #

Tauri自带启动页功能，能完全屏蔽加载过程中的页面内容，直到应用资源加载完成再关闭启动页，这是最彻底的解决方案：

1. 在tauri.conf.json中配置启动页：

{
  "tauri": {
    "windows": [
      {
        "title": "你的应用名称",
        "width": 800,
        "height": 600,
        "splashscreen": {
          "image": "splashscreen.png",
          "width": 400,
          "height": 300
        }
      }
    ]
  }
}

2. 在页面资源加载完成后关闭启动页：

import { app } from '@tauri-apps/api';

// 确保所有资源加载完成后执行
window.addEventListener('load', async () => {
  await app.hideSplashscreen();
});

3. 预加载CSS资源 #

通过link rel="preload"优先加载核心CSS文件，缩短样式生效的等待时间：

<head>
  <!-- 预加载主CSS文件，提升加载优先级 -->
  <link rel="preload" as="style" href="/src/style.css">
  <!-- 正常引入CSS -->
  <link rel="stylesheet" href="/src/style.css">
</head>

4. Vite生产构建优化 #

在生产构建时，让Vite把CSS内联到HTML中，避免额外的网络请求：
修改vite.config.js：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    cssCodeSplit: false, // 禁用CSS拆分，将所有CSS打包到JS中运行时注入
    rollupOptions: {
      output: {
        manualChunks: undefined // 禁用代码拆分，减少请求数量
      }
    }
  }
});

或者使用vite-plugin-css-injected-by-js插件，直接将CSS内联到HTML的<head>中：

npm install vite-plugin-css-injected-by-js --save-dev

然后在vite.config.js中配置：

import { defineConfig } from 'vite';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';

export default defineConfig({
  plugins: [cssInjectedByJsPlugin()]
});

内容的提问来源于stack exchange，提问作者padeso