React使用公共文件夾public問題

Posted on 2022-12-03 by WalkonNet

React使用公共文件夾public

在剛學React/Vue的時候，配合webpack腳手架學習的過程中，碰到一個問題會非常疑惑，比如在React中有個Public文件夾可以放靜態資源，但是在src目錄中同樣有個assets文件夾，這個同樣也是放靜態資源的，這個就很困惑瞭，為何放置靜態資源的地方會有兩個？

兩者區別

其實放在兩個文件夾區別就在於是否會被webpack所處理，如果您將文件放入該public文件夾，webpack 將不會處理它，在你打包的時候，會將public文件夾直接復制一份到你構建出來的文件夾中。

而src/assets目錄的文件（前提你在js中有引入），它會被webpack編譯，比如圖片，如果你的圖片小於你在webpack中的loader下設置的limit大小（可配置），它會被編譯成base64，從而在實際項目中減少http請求

放置在src/assets目錄有以下幾點好處：

腳本和樣式表被縮小並捆綁在一起以避免額外的網絡請求。
缺少文件會導致編譯錯誤，而不是用戶的404錯誤。
結果文件名包含內容哈希，因此您無需擔心瀏覽器緩存舊版本。

當然，在實際項目中，公共文件夾public還是有它的作用的，如果你希望你的文件不被編譯，比如jquery.min.js，或者壓縮好的js插件等，你就可以把文件放在public文件夾中，這樣還可以減少文件構建時間，可以減少構建文件的大小。

換過來想，如果你把所有靜態資源全部放在assets文件夾中，你會發現最後打包出來的文件很大，導致首頁白屏時間過長，所以，你可以把一些不會改動的靜態文件放到public中。

在React中使用公共文件夾public

如果在index.html中，你可以像這樣去使用它：

<img src="%PUBLIC_URL%/image/poster.jpeg" alt="">

隻有前綴public可以訪問文件夾中的文件%PUBLIC_URL%。如果需要使用src或中的文件node_modules，則必須將其復制到那裡以明確指定將此文件作為構建的一部分的意圖。

當運行npm run build，Create React App將替換%PUBLIC_URL%為正確的絕對路徑，因此即使使用客戶端路由或將其托管在非根URL上，項目也會正常工作。

在JavaScript代碼中，可以process.env.PUBLIC_URL出於類似目的使用：

render() {
    return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

React腳手架public文件介紹

public文件夾下index.js

<!DOCTYPE html>
<html lang="en">
  <head>
		<meta charset="utf-8" />
		<!-- %PUBLIC_URL%代表public文件夾的路徑 -->
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow"  />
		<!-- 開啟理想視口，用於做移動端網頁的適配 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- 用於配置瀏覽器頁簽+地址欄的顏色(僅支持安卓手機瀏覽器) -->
    <meta name="theme-color" content="red" />
    <meta
      name="description"
      content="Web site created using create-react-app"
		/>
		<!-- 用於指定網頁添加到手機主屏幕後的圖標 -->
		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" rel="external nofollow"  />
		<!-- 應用加殼時的配置文件 -->
		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow"  />
    <title>React App</title>
  </head>
  <body>
		<!-- 若瀏覽器不支持js則展示標簽中的內容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

React使用公共文件夾public問題

目錄