我正在使用 webpack/react/redux/node 开发一个应用程序，并且已经实现了服务器端渲染。到目前为止一切正常，所以我有一个一般性问题。我使用 webpack 来捆绑我的 JS 文件并激活了代码分割。因此我有两个 bundle :
- bundle.js(我的组件和自定义代码)
- vendor.js(react/redux 模块)
现在，据我所知，当我将这两个放在正常的 <script> 中时标记后，浏览器会等到页面和所有资源完全加载后才能显示任何内容。这样我就失去了 SSR 的性能优势，不是吗？
我的意思是该页面仍然被网络爬虫解析，例如google，但用户仍然必须等待页面完全加载才能看到任何内容。
我想把async在脚本标签中可以解决问题，例如:
<script async src='/vendor.js'></script>
<script async src='/bundle.js'></script>
但是，与 async在标签中，vendor.js通常会在 bundle.js 之后完成加载，因为它是一个更大的文件。
我是否做错了什么或者这个问题有解决方案吗？
最佳答案
您应该尝试在脚本标记上使用 defer 属性。
async 脚本在下载资源后立即解析并执行，而 defer 脚本仅在出现在标记中时执行。
文章Prefer DEFER over ASYNC深入讨论这个主题。
关于javascript - 带有 React SSR 的 HTML 异步脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42441035/