如何使用HTML的WebPack插件把script标签风格标记之前

问题描述 投票：2回答：1

TL; DR检查末段

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

  • app.css（HTML中仅增加了</head>之前）
  • vendor.js（HTML中仅增加了</body>之前）
  • app.js（HTML中仅增加了vendor.js后</body>之前）

Html webpack plugin在我的HTML模板添加上述文件。在这种情况下，首先我的浏览器将无法进行下载请求vendor和app和必须等待样式表会首先下载。那很糟。二，我的脚本将不必要地停止我的DOM渲染第一涂料时，它已经SSR呈现的HTML。

对于第二个，我加入defer它解决它。但是，对于第一，为什么我的defer脚本必须等待样式表来获取下载甚至是当它不是在DOM建立（只是功能）所需的脚本！

所以，我希望把头部标签内的deferred scripts这是可能与html webpack plugin但我希望把他们的风格标签（外部样式表）之前作出有利于该浏览器可以请求这些脚本平行，而不是等待。

首先，你认为这是一个好主意吗？ （可能是因为浏览器只有有限的并行连接，因此，它可能会阻碍下载图片等，也可以是现代的浏览器自动做到这一点，因为他们试图向前看的HTML，并要求推迟剧本，但它只是最新的浏览器，不它？）

其次，如何实现使用html webpack plugin将推迟脚本风格标签之前？ （我想知道具体是这样）

javascript html webpack html-webpack-plugin deferred-loading
1个回答
4
投票

在inject: false设置configuration选项来禁用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.