Wie zu stoppen FOUC bei der Verwendung von css geladen webpack

Ich bin immer FOUC beim laden von css in meinem Einstiegspunkt, wenn mit webpack. Wenn ich das entfernen meiner css geladen werden, von webpack und gehören einfach in meine html-Datei als normalen link dann das problem mit FOUC geht Weg.

Hinweis: Dies nicht nur mit bootstrap Rahmen, die ich getestet habe, mit
Stiftung und Materialisieren, mit dem gleichen Ergebnis

Den code unten geschrieben ist nur ein test Beispiel für mein problem mit Bootstrap.

Html-code

<!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 main entry point

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' },
    ]
  }
};
InformationsquelleAutor dan | 2016-04-06
  1. 25

    ExtractTextWebpackPlugin wird Ihnen erlauben, die Ausgabe Ihrer CSS als separate Datei, anstatt es eingebettet in Ihre JS-bundle. Dann können Sie diese Datei in Ihren HTML, die, wie Sie sagte, verhindert der flash of unstyled content.

    Ich würde nur empfehlen, mit diesem in Produktionsumgebungen, wie es hält heiß-laden von der Arbeit und macht Ihren kompilieren dauern länger. Ich habe meine webpack.config.js eingerichtet, gelten nur für das plugin, wenn process.env.NODE_ENV === "production"; Sie bekommen noch die FOUC, wenn du tust, eine Entwicklung, Erstellung/Ausführung, die dev-server, aber ich fühle mich wie das ist ein fair-trade-off.

    Weitere Informationen, wie Sie diese einrichten, werfen Sie einen Blick auf SurviveJS s guide.

    Update: Wie bereits angemerkt in den Kommentaren, ExtractTextWebpackPlugin wurde nun abgelöst durch mini-css-Auszug-plugin - sollte man stattdessen verwenden.

    • Ein bequemer Ansatz, der funktioniert auch mit hot-reloading, ist das ausblenden der Inhalte, bis Sie das stylesheet angewendet wurde. Mit webpack Steuerung der laden, ich nehme an, es ist schwieriger zu implementieren.
    • Das ist definitiv eine Möglichkeit auch! Persönlich, obwohl, ich denke, dass ein Blitz keine Inhalte können genau so schlimm sein wie ein flash of unstyled content. Der Ansatz in meiner Antwort sollte beseitigen Sie beide, da die CSS geladen werden können, in den Kopf der Seite als normal, anstatt zu warten, für die JS zu laden.
    • Dokumentation zu diesem plugin ist inkonsistent
    • Wie so?
    • Die Seite, Extrahieren von Text Plugin jetzt, sagt zu "mini-css-Auszug-plugin" statt, wenn Sie auf webpack 4 oder höher. Ich Tat, und es funktioniert gut für mich. Weniger Komplex als Text Extrahieren-Plugin, aber es macht, was es muss.
    • Ja, das ist die gleiche Lösung wie empfohlen in Github issues: github.com/webpack-contrib/style-loader/issues/107

    InformationsquelleAutor Joe Clay
  2. 9

    Etwas spät zur party, aber hier ist, wie ich es mache.

    Während ich erkenne die Verdienste von Extrakt-text-plugin, es ist gezeichnet von einer rebuild-Fehler, vermasselt css um, und ist ein Schmerz zu richten. Und Einstellung der timeouts in js ist nicht etwas, was jeder tun sollte (es ist hässlich und ist nicht 100% garantiert, um zu verhindern, dass fouc)...

    Also mein 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, in client.js ganz am Ende füge ich hinzu:

    include "./unhide.css";

    ...und einblenden.css-enthält eine einzige Zeile:

    #app { display: block }

    Voila, Sie sehen nichts, bis die app geladen ist.

    • Für meine dunklen hintergrund app, kombinierte ich dies mit <body bgcolor="#19191C">.
    • Ich habe versucht diese (noch am Experimentieren), und die FOUC noch passiert. Zumindest ich denke, es ist FOUC, es ist mehr wie eine kitschige wischen Sie in Richtung der Mitte des Bildschirms. Egal, verwenden wir eckige (Wechsel zu reagieren bald), und ich habe den Verdacht, dass hat mehr mit Ihr zu tun.
    • Ok, so jetzt das Problem der user sein würde, starrte auf einen leeren Raum für einen moment(s)... in meinem Fall 3 Sekunden, +/- 1 Sekunde. Gut, jetzt ist natürlich die Gelegenheit für eine loading animation. Ok, aber für das laden der animation nicht zu sehen kitschige, es muss eine 3second minimum (mindestens ein Zyklus der animation loop). So fuhren wir FOUC, um eine 3 Sekunden animation zum laden. Auch diese Auswahl stammt von Fall zu Fall. Ich bevorzuge, zeigt etwas Struktur Anfang an, und keine springende Schnittstelle wie die Dinge laden.
    InformationsquelleAutor user3361481
  3. 3

    Es ist kitschige, aber ich wickle ReactDom.render() in ein setTimeout() in mein root index.js Datei.

    setTimeout(ReactDOM.render(...), 0)

    • Einfachste Lösung. Diese kann getan werden, bedingt für die Entwicklung Modus nur.
    InformationsquelleAutor wkoutre
Schreibe einen Kommentar