CODEWITHSUNDEEP
csswebpackloaddelay
user3681549
user3681549

Reputation:

Delayed loading of css on page refresh (Webpack)

I have splitted webpack configurations, common, development and production configs. I load also jQuery via webpack. The problem is that, on page refresh, there is short delay for about 200-300ms before css is loaded, so my page is firstly shown without it, and then reloads with css. What could be the problem?

In common, under plugins, I have:

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

In development config I have:

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

and for production mode:

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 Here is compiled html file:

<!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>

Upvotes: 2

Views: 1884

Answers (2)

Grasper
Grasper

Reputation: 1313

Another solution can be to hide body:

<body style="display:none">

And then make it visible after you load your JS(i.e: inside your fetch):

document.body.style.display = 'block';

Upvotes: 0

Soheil
Soheil

Reputation: 1511

Maybe it is too late to answer this question, however, that is not related to Webpack. You have attached your bundle at the end of the page. Therefore before loading the bundle the page content comes up and after that bundles loaded the style. Therefore until it loads the completely there is a little time that takes time for the browser to run the bundle and attach the style. It can be fixed by putting the bundle in the <head> tag. You may need to run your jquery codes inside $(document).ready() function by passing a callback as an argument. Pay attention that it can affect the load time of your page as well.

Another solution can be configuring Webpack to load the styles first and then your js codes.

Upvotes: 2

Related Questions