TL; DR检查末段
我的情况:我有以下文件:
</head>
之前)</body>
之前)</body>
之前)Html webpack plugin在我的HTML模板添加上述文件。在这种情况下,首先我的浏览器将无法进行下载请求vendor
和app
和必须等待样式表会首先下载。那很糟。二,我的脚本将不必要地停止我的DOM渲染第一涂料时,它已经SSR呈现的HTML。
对于第二个,我加入defer
它解决它。但是,对于第一,为什么我的defer
脚本必须等待样式表来获取下载甚至是当它不是在DOM建立(只是功能)所需的脚本!
所以,我希望把头部标签内的deferred scripts
这是可能与html webpack plugin
但我希望把他们的风格标签(外部样式表)之前作出有利于该浏览器可以请求这些脚本平行,而不是等待。
首先,你认为这是一个好主意吗? (可能是因为浏览器只有有限的并行连接,因此,它可能会阻碍下载图片等,也可以是现代的浏览器自动做到这一点,因为他们试图向前看的HTML,并要求推迟剧本,但它只是最新的浏览器,不它?)
其次,如何实现使用html webpack plugin将推迟脚本风格标签之前? (我想知道具体是这样)
在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>