React - public Or assets ?

参考文章：

前言

在 React 中，src 目录外的 public 文件夹和在 src 目录中的 assets 文件夹都可以放静态资源，那么问题来了，为何放置静态资源的地方会有两个？

区别

两个文件夹区别就在于是否会被webpack所处理:

public: 如果您将文件放入该public文件夹，webpack 将不会处理它，在你打包的时候，会将public文件夹直接复制一份到你构建出来的文件夹中。
src/assets：src/assets 目录的文件（前提你在js中有引入），它会被webpack编译，比如图片，如果你的图片小于你在webpack中的loader下设置的limit大小（可配置），它会被编译成base64，从而在实际项目中减少http请求。

放置在src/assets目录有以下几点好处：

脚本和样式表被缩小并捆绑在一起以避免额外的网络请求。(不会去请求资源，而是直接从打包中查找)
缺少文件会导致编译错误，而不是用户的404错误。
结果文件名包含内容哈希，因此无需担心浏览器缓存旧版本。

public 文件夹的作用在于：如果你希望你的文件不被编译，比如jquery.min.js，或者压缩好的js插件等，你就可以把文件放在public文件夹中。此外，这样还可以减少文件构建时间，可以减少构建文件的大小 (节约打包时间和打包项目的大小)。换过来想，如果你把所有静态资源全部放在assets文件夹中，你会发现最后打包出来的文件很大，导致首页白屏时间过长 (网站会花大量时间下载打包的项目)，所以，你可以把一些不会改动的静态文件放到public中。

public 文件夹路径问题

在 React 中使用公共文件夹是不能直接使用相对路径或绝对路径的。因为 public 文件夹位于 src 文件夹之外且不被 webpack 编译的。

public 在 index.html 中使用

示例：

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

当运行 npm run build，Create React App 将替换 %PUBLIC_URL% 为正确的绝对路径，因此即使使用客户端路由或将其托管在非根URL上，项目也会正常工作。

public 在 js 中使用

在JavaScript代码中，可以 process.env.PUBLIC_URL 出于类似目的使用：

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

jtwang7 / React-Note