Question

我正在进入webpack的HMR功能。

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

我想HMR并不理想我在HTML结尾处包含了JS。然而，即使我将JS移到头部，我仍然存在问题。所以我的问题是：

我是否正确（按设计）不可能没有任何FOUC的HMR？

如果不是，我正在考虑保持我的关键/初始CSS不变（外部文件，包括在头部），并且仅在运行时使用HMR来动态加载CSS。

有没有比使用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);

没有FOUC的Webpack HMR可能吗？

0 个答案: