使用 Webpack 时努力删除 FOUC(无样式内容的 Flash)

Posted

技术标签:

【中文标题】使用 Webpack 时努力删除 FOUC(无样式内容的 Flash)【英文标题】:Struggling to remove FOUC (Flash Of Unstyled Content) when using Webpack 【发布时间】:2017-08-05 04:58:21 【问题描述】:

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

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

虽然在所有浏览器中一切正常,但在加载应用程序时会出现 FOUC(无样式内容的 Flash)。

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

这里是 webpack config - loader 部分的 sn-p:


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

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

谢谢。

【问题讨论】:

【参考方案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。

【讨论】:

ExtractTextPlugin 已被弃用,现在是“mini-css-extract-plugin”

以上是关于使用 Webpack 时努力删除 FOUC(无样式内容的 Flash)的主要内容,如果未能解决你的问题,请参考以下文章

爱创课堂每日一题第四十九天- 什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

FOUC

小白学react之由FOUC引发的一次webpack变革

Web性能优化:FOUC

18什么是FOUC?如何避免

消除无样式内容的闪烁