具有反应SSR的HTML异步脚本

Question

我正在使用webpack / react / redux / node开发一个应用程序，并且已经实现了服务器端渲染。到目前为止一切都有效，所以我宁愿有一个普遍的问题。我使用webpack捆绑了我的JS文件，并激活了代码分割。因此我有两个包：

• bundle.js（我的组件和自定义代码）
• vendor.js（react / redux modules）

现在，据我所知，当我将这两个标记放在普通的<script>标记中时，浏览器会等待页面和所有资源完全加载以显示任何内容。这样我就失去了SSR的性能优势，不是吗？ 我的意思是网页抓取工具仍在解析页面，例如谷歌，但用户仍然必须等待页面完全加载，然后才能看到任何内容。

我认为在脚本标记中添加async可以解决问题，例如：

<script async src='/vendor.js'></script>
<script async src='/bundle.js'></script>

但是，如果代码中包含async，则vendor.js通常会在bundle.js之后完成加载，因为它是一个更大的文件。

我有什么问题或是否有解决此问题的方法？

Answer 1

您应该尝试脚本标记上的defer属性。

下载资源后，

async脚本将被解析并执行，而defer脚本仅在标记中出现时执行。

文章Prefer DEFER over ASYNC深入探讨了这个主题。

Answer 2

您可以对不影响页面解析生命周期的文件使用延迟或异步。例如分析脚本。 您可以在https://www.w3schools.com/tags/att_script_defer.asp

查看差异

但是对于启动性能，您将不得不将捆绑包与启动期间需要的捆绑包进行进一步分割，而不会将捆绑包分开，然后您可以使用“异步”或“延迟”。我更喜欢在一个大文件上使用'defer'。