Webpack 没有FOUC的网页HMR可能吗？

我正在进入webpack的HMR功能

但从一开始就让我感到困扰的是FOUC：在页面加载时，整个页面都没有样式（直到JS完成加载）

我想对于HMR来说，这并不理想，因为我在HTML的末尾包含了JS。 然而，即使我将JS移动到头部，我仍然无法解决这个问题。 所以我的问题是：

如果没有FOUC，HMR（按设计）是不可能的，对吗

如果不是这样的话，我想让我的关键/初始CSS保持不变（外部文件，包含在head中），并且在运行时只对动态加载的CSS使用HMR

有没有比使用include/exclude复制整个规则更好的方法？ 或者，以下是唯一的可能性

webpack.js

{
    test: /\.scss$/,
    include: /criticalA|criticalB|criticalC/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader',
        'sass-loader'
    ]
},
{
    test: /\.scss$/,
    exclude: /criticalA|criticalB|criticalC/
    use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader'
    ]
}

app.js

import './criticalA.scss';
import './criticalB.scss';
import './criticalC.scss';

setTimeout(() => {
    import('./dynamicA.scss');
    import('./dynamicB.scss');
}, 1000);

---

你知道HMR只是为了发展吗？为什么在开发上有一个FOUC是一个问题？我知道这只是开发，但我的许多同事还不相信webpack，因为它很复杂。因此，我想向他们展示webpack的好处，并尽量避免让人觉得它让事情变得更糟。如果页面最初在每次加载时都被破坏，我会避免HMR，或者我会尝试将其仅用于非关键内容。