gpt4 book ai didi

javascript - 如何使用html webpack插件将脚本标签放在样式标签之前

转载 作者:太空宇宙 更新时间:2023-11-04 14:27:52 25 4
gpt4 key购买 nike

长话短说检查最后一段

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

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

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

对于第二,我添加了defer这解决了它。但是对于首先,为什么我的defer脚本必须等待样式表被下载,即使是那些在 DOM 构建中不需要的脚本(但只是功能)!

所以,我想把那些 deferred scripts html webpack plugin 可能的内部头标签但我想将它们放在样式标签之前(对于外部样式表),以便浏览器可以并行请求这些脚本而不是等待。

首先,您认为这是个好主意吗? (可能是因为浏览器只能有有限的并行连接,所以它可能会阻碍下载图像等。或者现代浏览器可能会自动执行它,因为它们试图在 html 中向前看并请求延迟脚本,但它只是最近的浏览器,不是吗?)

其次,如何使用 html webpack plugin 实现将延迟脚本放在样式标签之前?(我想具体知道这个)

最佳答案

configuration 中设置 inject: false 选项禁用 html webpack 插件注入(inject)脚本标签,然后将脚本和样式标签自己放在 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>

关于javascript - 如何使用html webpack插件将脚本标签放在样式标签之前,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45130739/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com