在React [FOUC]中等待JS加載到JS之前

Question

我們完全在React中構建我們的新網站，並利用代碼分割和scss。 每當請求一個新頁面時，它首先在瀏覽器中加載原始HTML，然后在一段時間之后加入css樣式，這似乎是一個FOUC問題。 這會帶來糟糕的體驗，我們需要弄清楚如何在渲染組件之前確保加載CSS。 有人對這個有經驗么？ 目前網上似乎缺乏此問題的信息。 我們目前有10個js塊但只有一個main.XXXXXXX.css。

Answer 1

如果您只有一個main.XXXXXXX.css文件，那么您應該手動將其注入初始html視圖的<head>部分並將條目輸入到您的應用程序（也就是初始JS文件或某些webpack清單JS文件））加載在同一個html視圖的底部。

例如

<html>
   <head>
      ...some header stuff
      <link type="text/css" rel="stylesheet" href="/path/to/main.XXXXXXX.css">
   </head>
   <body>
      <div id="react-app"></div>
      <script src="/path/to/vendor.js"></script>
      <script src="/path/to/app_entry_or_webpack_manifest.js"></script>
   <body>
</html>

我假設您的服務器至少提供了與上面類似的頁面。 在這種情況下（上圖），您的CSS將在JS之前加載，您應該避免FOUC問題。

如果您有許多css文件，動態生成（通過代碼拆分），因為你打破了你的應用程序，這個問題變得更加困難，但聽起來你還沒有這個問題。

編輯：剛剛意識到您可能不知道如何將動態創建的CSS表注入您的入口html文件。 如果您使用mini-css-extract-plugin，則可以指定它生成的文件名。 在此示例中，您可以看到您可以選擇包含[哈希]。 你多么不想要哈希。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      }
    ]
  }
}

Answer 2

我可以想到兩個選擇：

在您的react應用程序的index.js中調用css。
加載DOM后渲染react應用程序。 嘗試在index.js react文件中添加這樣的內容：

    document.addEventListener("DOMContentLoaded", function(event) {
      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );
    });

我認為最佳實踐是應該在該組件中調用由ReactJS組件呈現的HTML樣式。 所以我更喜歡選項1.注意：如果css文件是一個全局文件，你可以認為一個重構只包含組件內部組件的樣式。

在React [FOUC]中等待JS加載到JS之前

問題描述

2 個解決方案

解決方案1
4 2018-08-28 22:26:46

解決方案2
1 2019-05-24 14:09:58

在React [FOUC]中等待JS加載到JS之前

問題描述

2 個解決方案

解決方案1 4 2018-08-28 22:26:46

解決方案2 1 2019-05-24 14:09:58

解決方案1
4 2018-08-28 22:26:46

解決方案2
1 2019-05-24 14:09:58