hermano - selectores css
Cómo detener FOUC cuando se usa css cargado por webpack (3)
Es una broma, pero envuelvo ReactDom.render () en un setTimeout () en mi archivo root index.js.
setTimeout(ReactDOM.render(...), 0)
Cuando uso un paquete web, obtengo FOUC al cargar css dentro de mi punto de entrada. Si elimino mi css del paquete web y lo incluyo en mi archivo html como un enlace normal, el problema con FOUC desaparece.
Nota: Esto no solo con el framework bootstrap, lo he probado con Foundation y Materialize con los mismos resultados.
El código publicado a continuación es solo un ejemplo de prueba de mi problema al usar Bootstrap.
Código 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>
punto de entrada principal 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'' },
]
}
};
Un poco tarde para la fiesta, pero así es como lo hago.
Si bien reconozco los méritos de extraer-texto-plugin, está plagado de un error de reconstrucción que desordena el orden de css, y es un problema configurar. Y establecer tiempos de espera en js no es algo que nadie debería hacer (es feo y no está garantizado al 100% para prevenir fouc) ...
Así que mi index.html es:
<!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>
Luego, en client.js al final agrego:
include "./unhide.css";
... e unhide.css contiene una sola línea:
#app { display: block }
Voila, no ves nada hasta que se carga toda la aplicación.
ExtractTextWebpackPlugin le permitirá generar su CSS como un archivo separado en lugar de tenerlo incrustado en su paquete JS. Luego puede incluir este archivo en su HTML, que, como usted dijo, evita la descarga de contenido sin estilo.
Recomiendo solo usar esto en entornos de producción, ya que deja de funcionar la carga en caliente y hace que su compilación tome más tiempo. Tengo mi webpack.config.js configurado para aplicar solo el complemento cuando process.env.NODE_ENV === "production" ; aún obtienes el FOUC cuando estás haciendo un desarrollo de desarrollo / ejecutando el servidor de desarrollo, pero siento que esto es un intercambio justo.
Para obtener más información sobre cómo configurar esto, consulte la guía de SurviveJS .