web-dev-qa-db-ja.com

webpackによって読み込まれたcssを使用しているときにFOUCを停止する方法

Webpackを使用しているときにエントリポイント内にcssをロードすると、FOUCが表示されます。 cssをwebpackによるロードから削除し、通常のリンクとしてhtmlファイルに含めるだけで、FOUCの問題はなくなります。

注：これはbootstrapフレームワークだけでなく、FoundationとMaterializeで同じ結果をテストしました

以下に掲載されているコードは、Bootstrapを使用した問題の単なるテスト例です。

HTMLコード

<!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メインエントリポイント

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' },
    ]
  }
};
csswebpackfouc
27
dan

ExtractTextWebpackPlugin を使用すると、CSSをJSバンドルに埋め込むのではなく、個別のファイルとして出力できます。その後、このファイルをHTMLに含めることができます。これにより、スタイル設定されていないコンテンツのフラッシュが防止されます。

ホットロードが機能しなくなり、コンパイルに時間がかかるため、本番環境でのみ使用することをお勧めします。私のwebpack.config.jsプラグインを適用するのはprocess.env.NODE_ENV === "production";開発ビルドを行っているときや開発サーバーを実行しているときでもFOUCを取得できますが、これは公正なトレードオフだと思います。

この設定方法の詳細については、 SurviveJSのガイド をご覧ください。

更新：コメントで述べたように、ExtractTextWebpackPluginは mini-css-extract-plugin に置き換えられました-使用する必要があります代わりに。

25
Joe Clay

パーティーに少し遅れましたが、私はそれをどのように行うのですか？.

私はextract-text-pluginのメリットを認識していますが、CSSの順序を台無しにする再構築バグに悩まされており、設定するのが面倒です。そして、jsでタイムアウトを設定することは誰もがすべきことではありません（それはいものであり、foucを防ぐために100％保証されていません）...

だから私のindex.htmlは：

<!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>

次に、client.jsの最後に追加します：

include "./unhide.css";

...およびunhide.cssには1行が含まれています。

#app { display: block }

出来上がり、アプリ全体がロードされるまで何も見えません。

9
user3361481

ジャンキーですが、ルートのindex.jsファイルのsetTimeout（）でReactDom.render（）をラップします。

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

3
wkoutre