页面刷新时延迟加载css（Webpack）答案

【问题标题】：Delayed loading of css on page refresh (Webpack)页面刷新时延迟加载css（Webpack）
【发布时间】：2018-09-12 13:25:13
【问题描述】：

我已经拆分了 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>

【问题讨论】：

请提供编译好的.html文件？
您不应将 sass-loader 应用于 css 文件。将每个配置分开。
您的意思是，对于.css 文件，应用style-loader 和css-loader，对于.scss 文件，应用sass-loader？
对于 scss 应用 style-loader、css-loader 和 sass-loader。对于 css，你是对的。

标签： css webpack load delay

【解决方案1】：

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

另一种解决方案是配置 Webpack 先加载样式，然后再加载 js 代码。

【讨论】：

我最终在我的 webpack 配置中使用 MiniCssExtractPlugin 将我的 CSS 与我的 JS 分开，这样我就可以将 CSS 放在 <head> 中，将 JS 放在 <body> 中