使用Webpack时要努力删除FOUC（未样式化内容的Flash） [英] Struggling to remove FOUC (Flash Of Unstyled Content) when using Webpack

问题描述

我已使用webpack 2捆绑了我的应用程序代码。在我的主模块上使用了require语句来嵌入SCSS文件。

I have bundled my app code using webpack 2. Used require statement on my main module to embed an SCSS file.

require('./styles/styles.scss');

虽然在所有浏览器中都能正常运行，但加载时可见FOUC（未样式化内容的闪光）应用程序。

While things work fine in all browsers, there is a FOUC (Flash Of Unstyled Content) visible when loading the application.

是将所有webpack模块装入的方式，因为CSS文件是动态注入到标头中，还是在webpack配置中做错了？

Is it the way all webpack modules load since CSS files are injected dynamically to header or am I doing something wrong in webpack config?

这是webpack配置的一个片段-加载器部分：

Here is a snippet of webpack config - loader section:

{
    test: /\.scss$/,
    loaders: [ 'style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap' ]
}

尽管这不会引起任何副作用，但如果避免的话会更好。

Albeit this isn't causing any side effects but would be better if avoided.

谢谢。

推荐答案

现在，您的样式已烘焙到JS文件中。就您而言，浏览器需要一段时间来解析javascript，并且只有在处理后才能将样式应用于页面。这导致了FOUC。

Right now your styles are baked into the JS files. In your case, the browser takes a while to parse the javascript and only after processing it can apply the styles to the page. That is causing the FOUC.

要解决此问题 ExtractTextPlugin 已开发。基本上，它的作用是取出指定的css并将其放在单独的css文件中。基本配置如下：

To cope with this problem ExtractTextPlugin was developed. Basically what it does is it takes out the css specified and puts it in a separate css file. A basic configuration would look like:

const plugin = new ExtractTextPlugin({
  filename: '[name].[contenthash:8].css',
});

module: {
      rules: [ {
          test: /\.css$/,
          use: plugin.extract({
            use: 'css-loader',
            fallback: 'style-loader',
          })
       }]
},
plugins: [ plugin ]

然后，如果不使用 html-webpack-plugin 。通过在部分中链接生成的文件，您将摆脱FOUC。

Then you must attach the generated file to your HTML page if you're not using html-webpack-plugin. By linking generated file in section you will get rid of FOUC.

这篇关于使用Webpack时要努力删除FOUC（未样式化内容的Flash）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！