賞金明天到期。_ 此問題的答案有資格獲得 100聲望賞金。 Alt C希望引起對這個問題的更多關注。
我試圖理解，我對此很陌生。如果我部署一個 React 應用程式并將影像存盤在 React 應用程式中，它會影響 React 應用程式的速度嗎？首次加載時，是否會根據要求下載所有影像？如果是這樣的話，去外部影像很好嗎？
外部的
<img className="w-full rounded-lg" src="https://images.unsplash.com/photo-1551650975-87deedd944c3ixlib=rb1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574&q=80" alt="Sunset in the mountains"></img>
內部的
import gameImg from "../../assets/images/game.jpg";
根據這個問題：網站影像性能：本地檔案夾還是外部來源？本地影像是個好方法。但是對于 React 應用程式來說，情況是否相同？
uj5u.com熱心網友回復：
對于標準的 Crate React 應用程式，行為取決于影像的大小。如添加影像、字體和檔案的檔案所述
小于 10000 位元組且不以 .svg 結尾的影像被編碼為資料 uri。這些檔案嵌入在您的 java 腳本包中，并在您的應用程式加載時直接有效下載
對于其他大小，react 將它們復制到輸出目錄中的靜態檔案夾中。第一次使用圖片時，瀏覽器會發出加載圖片的請求。這相當于本地存盤影像，并且加載時間將是可預測的。
使用外部影像，您的瀏覽器首先必須決議域名，建立新的 SSL 連接，然后他們才能請求下載它，而且您還有更多的隱私問題。但這是用戶提供的內容和動態更新影像而無需重建的有效解決方案。
uj5u.com熱心網友回復：
我假設您正在使用 Create React App（或類似的東西）。無論如何，如果您console.log(gameImg)會看到它為您提供了一個 URL，就像外部影像一樣。因此，如果您創建一個<img src={gameImg} />影像，則瀏覽器不會加載該影像，直到該img元素出現在頁面上。
有一些小警告。一些捆綁器將對影像進行 base64 編碼并將其直接行內到源代碼中。在這種情況下，它將增加您的捆綁包大小。但是，我相信大多數打包者都非常聰明地知道應該做什么和不應該做什么。所以我不會擔心這個。
uj5u.com熱心網友回復：
在這兩種情況下，瀏覽器都會向 Web 服務器發出請求。
不同之處在于，在第一種情況下，請求被發送到第三方外部服務器（此處為 images.unsplash.com）。
在第二種情況下，請求被發送到為應用程式提供服務的同一服務器。
兩者都有優點和缺點。
我個人更喜歡從同一服務器而不是應用程式提供影像。我為特殊情況保留外部服務器選項。
如果你想在應用程式中嵌入影像，為了避免額外的請求，你可以將影像嵌入到 base 64 編碼格式中，如果你將它嵌入到 src HTML 標記中，如下所示：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlQAAAJUCAYAAADTmLgpAAABgmlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8GkV ..." />
或者如果你將它嵌入到 CSS 規則中，就像這樣：
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA ... AAABJRU5ErkJggg==')
當然，在這種情況下，您的應用程式會更大，初始負載可能會更長。但是，如果使用受到限制，這不會產生真正的變化。
uj5u.com熱心網友回復：
是的，當你有多個影像時，它往往會拖拽你的反應應用程式，所以最好你有一個在線或云存盤（當你處理大量影像時，比如你正在構建一個畫廊應用程式）云存盤站點，如https:/ /cloudinary.com/將非常有用。如果您仍想在本地存盤影像，請確保將延遲加載效果添加到保存影像的 div 中，這樣用戶就不會認為您的應用程式是空白的，您可以查看https://www.npmjs.com/package/react- loading-skeleton.Goodluck
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/520195.html