我已经拆分了 webpack 配置、通用配置、开发配置和生产配置。我还通过 webpack 加载 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'
]
}
]
}编辑 这是编译后的 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>最佳答案
也许现在回答这个问题已经太晚了，但是，这与 Webpack 无关。您已将 bundle 附在页面末尾。因此，在加载 bundle 之前，页面内容会出现，然后 bundle 会加载样式。因此，在完全加载之前，浏览器需要一些时间来运行 bundle 并附加样式。可以通过将 bundle 放入 <head> 来修复它标签。您可能需要在$(document).ready()内运行jquery代码通过传递回调作为参数来实现函数。请注意，它也会影响页面的加载时间。
另一个解决方案可以配置 Webpack 首先加载样式，然后加载 js 代码。
关于css - 页面刷新时延迟加载 css (Webpack)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52296327/