React使用公共文件夹public问题

叉叉酱 2022-12-02 我要评论

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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

React使用公共文件夹public问题