FOUC 仅当 webpack Bootstrap 包包含在 <body> 的末尾答案

【问题标题】：FOUC only if webpack Bootstrap bundle included at end of <body>FOUC 仅当 webpack Bootstrap 包包含在 <body> 的末尾
【发布时间】：2020-07-27 18:48:13
【问题描述】：

我只是在学习 webpack。作为一个练习，我用它来捆绑 Bootstrap。如果我将捆绑包与他们的一个基本示例 Starter Template 一起使用，如果我将 <script src="./main.js"></script> 放在 <body> 的末尾，我会得到一个 FOUC。如果我把它放在<body> 的开头，就没有FOUC。

<script> 应该放在<body> 的开头吗？还是应该放在<body> 的末尾，在这种情况下应该使用其他方法来防止 FOUC？例如，使用 mini-css-extract-plugin 创建一个单独的 CSS 文件，而不是像 this one 等其他帖子中所述将其包含在 webpack JS 包中。

代码

dist/index.html

与Starter Template | Bootstrap 相同，除了

删除样式表 <link> 和 JS <script> 行
插入<script src="./main.js"></script>
- <body> 开头：没有 FOUC
- <body> 结束时：FOUC

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.(scss)$/,
                use: [{
                    loader: 'style-loader', // inject CSS to page
                }, {
                    loader: 'css-loader', // translates CSS into CommonJS modules
                }, {
                    loader: 'postcss-loader', // Run postcss actions
                    options: {
                        plugins: function () { // postcss plugins, can be exported to postcss.config.js
                            return [
                                require('autoprefixer')
                            ];
                        }
                    }
                }, {
                    loader: 'sass-loader' // compiles Sass to CSS
                }]
            }
        ]
    }
};

src/index.js

import 'bootstrap';
import './scss/index.scss';

src/scss/index.scss

@import "~bootstrap/scss/bootstrap";
@import "custom";

scss/_custom.scss 是微不足道的。

环境：webpack：4.44，bootstrap：4.4，Chrome：v80，Firefox：v78，Edge：v44（这些浏览器都有如上所述的FOUC/no-FOUC）。

【问题讨论】：

标签： webpack bootstrap-4

【解决方案1】：

我将尝试回答我自己的问题。因为我们不希望内容成为被脚本延迟，在生产中<script src="./main.js"> 应该插入到<body> 的end。此外，为了防止 FOUC，在生产中应将 CSS 提取到 main.css 使用 mini-css-extract-plugin 而不是从 main.js 动态加载。

在开发中，您可能希望使用style-loader 而不是mini-css-extract-plugin。这会从 main.js 动态加载 CSS，而不是创建 main.css。这允许您执行hot module replacement 之类的操作。如 [mini-css-extract-plugin 存储库 (https://github.com/webpack-contrib/mini-css-extract-plugin) 中所述：

[mini-css-extract-plugin] 应该只用于生产版本，没有加载器链中的样式加载器，特别是如果您想在其中包含 HMR 发展。

问题是动态加载 CSS 会导致 FOUC，除非 main.js 是在<body> 的开头加载。如果这不打扰你，那么你可以把它放在最后。我在 Bitbucket 上发布了 this example，展示了如何从源代码编译 Bootstrap starter-template example，其中 main.js 分别在开发和生产模式下自动插入到 <body> 的开头或结尾。

【讨论】：

我也遇到了同样的问题，还发现FOUC只在进行开发构建时出现。使用 mini-css-extract-plugin 的生产版本没有 FOUC，感觉很棒。