0

I'm getting into webpack's HMR feature.

But what bothers me right from the beginning is a FOUC: on page load the whole page is unstyled (until the JS has finished loading)

I guess for HMR it's not ideal I'm including the JS at the end of the HTML. However even when I move the JS into the head I've still the issue. So my question is:

Am I right that it's (by design) not possible to have HMR without any FOUC?

In case it isn't I was thinking about leaving my critical / initial CSS unchanged (external files, included in head) and only use HMR for dynamically loaded CSS at runtime.

Is there a better way to achieve this than duplicating the whole rule with include/exclude? Or is the following the only possibility?

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);
Kai
  • 51
  • 8
  • You know that HMR is for development only? Why is having a FOUC on development an issue ? – ChrisR May 22 '18 at 13:42
  • I know it's development only, but many of my colleagues are not convinced of webpack (yet) due to its complexity. Thus I'd like to show them the benefits of webpack and try to avoid the impression it makes things worse. If the page is initially broken on each page load I'll either avoid HMR or I'll try to use it for non critical stuff only. – Kai May 22 '18 at 15:53

0 Answers0