具有React SSR的HTML異步腳本

Question

我正在使用webpack / react / redux / node開發一個應用程序，並且已經實現了服務器端渲染。 到目前為止，一切正常，因此我寧願有一個一般性的問題。 我使用webpack捆綁了我的JS文件，還激活了代碼拆分。 因此，我有兩個捆綁包：

• bundle.js（我的組件和自定義代碼）
• vendor.js（react / redux模塊）

現在，據我所知，當我將它們都放置在普通的<script>標記中時，瀏覽器將等待直到頁面和所有資源都完全加載以顯示任何內容。 這樣我就失去了SSR的性能優勢，不是嗎？ 我的意思是網頁仍會被Web爬網程序（例如google）解析，但是用戶仍然必須等待網頁完全加載后才能看到任何內容。

我認為在腳本標簽中放置async將解決問題，例如：

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

但是，在標記中使用async時， vendor.js通常會在bundle.js之后完成加載，因為它是一個更大的文件。

是否有我做錯的事情或此問題的解決方案？

Answer 1

您應該在scripts標簽上嘗試defer屬性。

下載資源后， async腳本將被解析並執行，而defer腳本僅在它們出現在標記中時才執行。

相對於ASYNC而言，首選DEFER文章更深入地討論了此主題。

Answer 2

您可以在不影響頁面解析生命周期的文件上使用延遲或異步。 例如分析腳本。 您可以在這里查看差異https://www.w3schools.com/tags/att_script_defer.asp

但是，為了提高啟動性能，您必須將捆綁包與啟動期間所需的捆綁包和不需要的捆綁包進一步分開，然后可以使用“異步”或“延遲”。 我希望在大文件上使用“延遲”。