Ich bekomme FOUC, wenn ich css in mein ladeEinstiegspunkt bei der Verwendung von Webpack. Wenn ich meine CSS aus dem Webpack entferne und sie einfach als normalen Link in meine HTML-Datei einbinde, dann ist das Problem mit FOUC nicht mehr vorhanden.
Hinweis: Dies nicht nur mit dem Bootstrap-Framework, das ich getestet habe Gründung und Materialise mit den gleichen Ergebnissen
Der folgende Code ist nur ein Testbeispiel für mein Problem bei der Verwendung von Bootstrap.
HTML Quelltext
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
</div>
</div> <!-- /container -->
<script src="build/bundle.js"></script>
</body>
</html>
bootstrap.js Haupteinstiegspunkt
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import bootstrap from "bootstrap"
$(document).ready(function () {
console.log("bootstrap loaded")
});
webpack.config.js
var path = require("path");
const ProvidePlugin = require("webpack/lib/ProvidePlugin");
const webpack = require("webpack");
module.exports = {
entry: "./src/bootstrap.js",
output: {
path: path.join(__dirname, "build"),
filename: "bundle.js"
},
resolve: {
extensions: ["", ".js"]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],
devtool: "inline-source-map",
module: {
resolve: {
modulesDirectories: ["node_modules"]
},
loaders: [
{
test: path.join(__dirname, "src"),
loader: "babel-loader",
query: {
presets: ["es2015"]
}
},
{ test: /.css?$/, loader: "style!css"},
{ test: /.html$/, loader: "html" },
{ test: /.(png|gif|jpg)$/, loader: "url", query: { limit: 8192 } },
{ test: /.woff2(?v=[0-9].[0-9].[0-9])?$/, loader: "url", query: { limit: 10000, mimetype: "application/font-woff2" } },
{ test: /.woff(?v=[0-9].[0-9].[0-9])?$/, loader: "url", query: { limit: 10000, mimetype: "application/font-woff" } },
{ test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/, loader: "file" },
]
}
};
Antworten:
19 für die Antwort № 1ExtractTextWebpackPlugin können Sie Ihr CSS als separates ausgebenDatei anstatt sie in Ihr JS-Bundle einzubetten. Sie können diese Datei dann in Ihren HTML-Code einbinden, der, wie Sie sagten, das Flashen nicht gestylter Inhalte verhindert.
Ich würde empfehlen, dies nur in Produktionsumgebungen zu verwenden, da das Hotloading nicht mehr funktioniert und Ihr Kompilieren länger dauert webpack.config.js einrichten, um das Plugin nur dann anzuwenden, wenn process.env.NODE_ENV === "production"; Sie erhalten den FOUC immer noch, wenn Sie einen Entwicklungs-Build / einen Dev-Server ausführen, aber ich denke, dies ist ein fairer Handel.
Weitere Informationen zum Einrichten finden Sie unter SurviveJS 'Guide.
5 für die Antwort № 2
Ein bisschen spät zur Party, aber hier mache ich es.
Während ich die Vorzüge von erkenneExtrahieren-Text-Plugin, es wird von einem Rebuild-Fehler geplagt, der die Reihenfolge der css-Dateien durcheinander bringt und die Einrichtung sehr mühsam ist. Das Festlegen von Zeitüberschreitungen in js ist nicht etwas, das jeder tun sollte (es ist hässlich und wird nicht garantiert 100) %, um fouc zu verhindern) ...
Also meine index.html ist:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#app { display: none }
</style>
<title></title>
</head>
<body>
<div id="app"></div>
<script src="scripts/bundle.js"></script>
</body>
</html>
Dann füge ich am Ende in client.js hinzu:
include "./unhide.css";
... und unhide.css enthält eine einzige Zeile:
#app { display: block }
Voila, du siehst nichts, bis die ganze App geladen ist.
2 für die Antwort № 3
Es ist ein Janky, aber ich wickle ReactDom.render () in ein setTimeout () in meine Root-Datei index.js ein.
setTimeout(ReactDOM.render(...), 0)