Question

TL; DR 检查最后一段

我的情景： 我有以下文件：

app.css（在</head>之前的html中添加）
vendor.js（在</body>之前的html中添加）
app.js（在vendor.js之后的</body>之前的html中添加）

Html webpack plugin正在我的html模板中添加上述文件。在这种情况下，第一次我的浏览器将无法请求下载vendor和app，并且必须先等待样式表先下载。那很糟。 第二次，我的脚本将不必要停止我的DOM渲染第一个绘制时，它已经SSR呈现为html。

对于秒，我正在添加解析它的defer。但是对于第一个，为什么我的defer脚本必须等待样式表下载，即使这些脚本在DOM构建中不需要（但只是功能）！

所以，我想将那些deferred scripts放在head html webpack plugin中，但我想将它们放在样式标记之前（对于外部样式表）使浏览器可以并行请求这些脚本而不是等待。

首先，你觉得这是个好主意吗？（可能是因为浏览器只能有有限的并行连接，因此可能会阻碍下载图像等。或者现代浏览器可能会自动执行，因为他们试图在html中查看并请求延迟脚本但是它只是最近的浏览器，不是它？）

其次，如何使用html webpack plugin在样式标记之前设置延迟脚本？ （我想具体了解这一点）

Answer 1

在configuration中设置inject: false选项以禁用html webpack插件以注入脚本标记，然后将脚本和样式标记自行放入custom template：

webpack.config.js

plugins: [new HtmlWebpackPlugin({
  template: 'src/index.html',
  inject: false
})]

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  </head>
  <body>

    <%= htmlWebpackPlugin.files.chunks.main.entry %>
  </body>
</html>

Answer 2

html-webpack-plugin 的配置 inject 有 4 个不同的值：

new HtmlWebpackPlugin({
   template: './index.hbs',
   inject: 'body'
})

它的作用是：

<头>

选项	详情
真实	将根据 scriptLoading 选项将其添加到头部/主体
假	将禁用自动注入
'身体'	所有的javascript资源都会放在body元素的底部
'头'	将脚本放在 head 元素中

在此处参考更多详细信息：https://github.com/jantimon/html-webpack-plugin#options

如何使用html webpack插件在样式标记之前放置脚本标记

2 个答案: