在 React [FOUC] 中等待 CSS 在 JS 之前加载 [英] Wait for CSS to load before JS in React [FOUC]
问题描述
我们正在完全在 React 中构建我们的新网站，并利用代码拆分 &scss.每当请求新页面时，它首先在浏览器中加载原始 HTML，然后一秒钟左右，css 样式出现，这似乎是一个 FOUC 问题.这会带来糟糕的体验，我们需要弄清楚如何确保在渲染组件之前加载 CSS.有人对这个有经验么?目前似乎缺乏有关此问题的在线信息.我们目前有 10 个 js 块，但只有一个 main.XXXXXXX.css.
We are building our new website entirely in React and utilizing code-splitting & scss. Whenever a new page is requested it loads the raw HTML in the browser first and then a split second or so later the css styling comes in, seems to be a FOUC issue. This makes for a terrible experience and we need to figure out how to ensure the CSS is loaded before rendering the component(s). Does anyone have any experience with this? There seems to be a lack of information online currently with this issue. We currently have 10 js chunks but only one main.XXXXXXX.css.
推荐答案
如果你只有一个 main.XXXXXXX.css 文件，那么你应该手动将它注入初始 html 视图的部分，并在同一 html 视图的底部加载应用程序的条目(也称为初始 JS 文件或某些 webpack 清单 JS 文件).
If you only ever have a single main.XXXXXXX.css file, then you should manually inject it into the <head> section of the initial html view and have the entry to your app (aka the initial JS file or some webpack manifest JS file) loaded at the bottom of the same html view.
例如
<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 问题.
I am assuming you have a server that is serving up at least a page that looks similar to the above. In this case (above), your CSS will load before your JS and you should avoid the FOUC issue.
如果您有许多 css 文件，并且在您拆分应用程序时动态生成(通过代码拆分)，这个问题就会变得更加困难，但听起来您还没有遇到这个问题.
This problem becomes much more difficult if you have many css files, dynamically generated (via code splitting) as you break your app apart, but it doesn't sound like you have that problem yet.
刚刚意识到您可能不知道如何将动态创建的 css 表注入到您的入口 html 文件中.如果您使用 mini-css-extract-plugin 那么您可以指定它产生的文件名.在此示例中，您可以看到您可以选择包含或不包含 [hash].你很可能不想要哈希.
Just realized that you may not know how to inject a dynamically created css sheet into your entry html file. If you use mini-css-extract-plugin then you can specify the filename it produces. In this example, you can see you can optionally include a [hash] or not. You prolly don't want the hash.
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',
],
}
]
}
}
这篇关于在 React [FOUC] 中等待 CSS 在 JS 之前加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
