Возможен ли веб-пакет HMR без FOUC? - PullRequest
Новая
       11

Возможен ли веб-пакет HMR без FOUC?

0 голосов
/ 22 мая 2018

Я получаю доступ к функции веб-пакета HMR.

Но с самого начала меня беспокоит FOUC: при загрузке страницы вся страница не отображается (до завершения загрузки JS)

Я думаю, для HMR это не идеально, я включаю JS в конце HTML.Однако даже когда я перемещаю JS в голову, у меня все еще есть проблема.Итак, мой вопрос:

Прав ли я, что (по замыслу) невозможно иметь HMR без каких-либо FOUC?

Если это не так, я думал о том, чтобы оставить свой критический / начальный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);
...