HTML 带有 React SSR 的异步脚本
HTML async script with react SSR
我正在使用 webpack/react/redux/node 开发一个应用程序并且已经实现了服务器端渲染。到目前为止一切正常，所以我有一个一般性的问题。我使用 webpack 来捆绑我的 JS 文件并激活代码拆分。因此我有两个包：
- 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 深入探讨了这个主题。
您可以在不影响页面解析生命周期的文件上使用延迟或异步。例如分析脚本。
您可以在此处查看差异 https://www.w3schools.com/tags/att_script_defer.asp
但为了启动性能，您必须将您的捆绑包进一步拆分为启动期间需要的捆绑包和不需要的捆绑包，然后您可以使用 'async' 或 'defer'。我更喜欢在大文件上使用 'defer'。
我正在使用 webpack/react/redux/node 开发一个应用程序并且已经实现了服务器端渲染。到目前为止一切正常，所以我有一个一般性的问题。我使用 webpack 来捆绑我的 JS 文件并激活代码拆分。因此我有两个包：
- 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 深入探讨了这个主题。
您可以在不影响页面解析生命周期的文件上使用延迟或异步。例如分析脚本。 您可以在此处查看差异 https://www.w3schools.com/tags/att_script_defer.asp
但为了启动性能，您必须将您的捆绑包进一步拆分为启动期间需要的捆绑包和不需要的捆绑包，然后您可以使用 'async' 或 'defer'。我更喜欢在大文件上使用 'defer'。