3

TL;DR 检查最后一段

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

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

Html webpack 插件正在我的 html 模板中添加上述文件。在这种情况下，首先我的浏览器将无法发出下载请求，vendor并且app必须等待样式表首先被下载。那很糟。其次，当我的脚本已经是 SSR 渲染的 html 时，我的脚本将不必要地停止我的 DOM 来渲染第一次绘制。

其次，我要添加解决defer它的方法。但是首先，为什么我的defer脚本必须等待样式表才能下载，即使是那些在 DOM 构建中不需要（但只是功能）的脚本！

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

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

其次，如何使用html webpack插件实现将延迟脚本放在样式标签之前？ （我想具体了解一下）

4

2 回答 2

12

在配置中设置inject: false选项以禁用 html webpack 插件以注入脚本标签，然后将脚本和样式标签自己放置在自定义模板中：

webpack.config.js

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

索引.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>
于 2017-08-19T21:05:12.780 回答
0

html-webpack-plugin has a configuration inject with 4 different values:

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

and here what it does:

Option Details
true will add it to the head/body depending on the scriptLoading option
false will disable automatic injections
'body' all javascript resources will be placed at the bottom of the body element
'head' will place the scripts in the head element

Refer more details here: https://github.com/jantimon/html-webpack-plugin#options

于 2021-07-20T09:06:58.803 回答