页面刷新(Webpack)上延迟加载CSS

时间:2018-09-12 13:25:14

标签: css webpack load delay

我拆分了webpack配置,通用配置,开发配置和生产配置。我也通过webpack加载jQuery。问题是,在刷新页面时,在加载CSS之前会有大约200-300ms的短暂延迟,因此我的页面首先显示为没有它,然后使用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'
            ]
        }
    ]
}

编辑 这是编译的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>

1 个答案:

答案 0 :(得分:0)

也许回答这个问题为时已晚,但与Webpack无关。您已在页面末尾附加了捆绑软件。因此,在加载捆绑软件之前,将显示页面内容,然后在捆绑软件加载样式之后。因此,在完全加载之前,浏览器需要一点时间来运行捆绑软件并附加样式。可以通过将捆绑软件放入<head>标签中进行修复。您可能需要通过将回调作为参数传递来在$(document).ready()函数中运行jquery代码。请注意,它也会影响页面的加载时间。

另一个解决方案是将Webpack配置为先加载样式,然后再加载js代码。