javascript - 使用 Webpack 时努力删除 FOUC(Flash Of Unstyled Content)

Question

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

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

虽然在所有浏览器中都运行良好，但在加载应用程序时会出现一个 FOUC(无样式内容的 Flash)可见。

这是所有 webpack 模块加载的方式，因为 CSS 文件被动态注入(inject)到 header 中，还是我在 webpack 配置中做错了什么？

这是 webpack 配置的片段 - 加载器部分:

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

虽然这不会造成任何副作用，但如果避免会更好。

谢谢。

Answer 1

现在您的样式已嵌入到 JS 文件中。在您的情况下，浏览器需要一段时间来解析 javascript，只有在处理后才能将样式应用于页面。这导致了 FOUC。

应对这个问题ExtractTextPlugin发展了。基本上它所做的是取出指定的 css 并将其放在一个单独的 css 文件中。基本配置如下所示:

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，则必须将生成的文件附加到您的 HTML 页面.通过在部分中链接生成的文件，您将摆脱 FOUC。