Задержка загрузки CSS при обновлении страницы (Webpack) - PullRequest
Новая
       17

Задержка загрузки CSS при обновлении страницы (Webpack)

0 голосов
/ 12 сентября 2018

Я разделил конфигурации веб-пакетов, общие, настройки и производственные конфигурации. Я загружаю также jQuery через веб-пакет. Проблема в том, что при обновлении страницы перед загрузкой css происходит небольшая задержка в течение примерно 200-300 мс, поэтому моя страница сначала отображается без нее, а затем перезагружается с помощью css. В чем может быть проблема?

В общем, под плагинами у меня есть: 

new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
  }),

В конфигурации разработки у меня есть: 

{
            test: /\.scss$|\.css$/,
            use: [
                {
                    loader: "style-loader",
                    options: {sourceMap: true}
                },
                {
                    loader: "css-loader",
                    options: {sourceMap: true}
                },
                {
                    loader: "sass-loader",
                    options: {sourceMap: true}
                }
            ]
        },

и для производственного режима: 

optimization: {
        minimizer: [
            new UglifyJSPlugin({
                sourceMap: true,
                uglifyOptions: {
                    mangle: false,
                    compress: {
                        inline: false
                    }
                }
            }),

            new OptimizeCssAssetsPlugin({
                cssProcessor: require('cssnano'),
                cssProcessorOptions: {parser: _safe, discardComments: {removeAll: true}},
                canPrint: true
            })
        ]
    },


module: {
    rules: [
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader'
            ]
        }
    ]
}

EDIT Вот скомпилированный HTML-файл: 

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width">
        <meta http-equiv=X-UA-Compatible content="ie=edge">
        <link rel="shortcut icon" href="favicon.png">
    </head>
    <body>
        <div id=app></div>
        <script type="text/javascript" src="main.bundle.js?32313079e3d03749d814"></script>
    </body>
</html>
...