在学 React、Vue 等框架时，碰到一个问题会非常疑惑，在 React 中有个 Public 文件夹可以放静态资源，在 src 目录中也有个 assets 文件夹，这个同样也是放静态资源的，那么两者有何区别？
在于是否会被 webpack 处理
public 文件夹
webpack 不会处理，在打包时，会将内部文件直接复制一份到构建出来的文件夹中
src/assets文件夹
会被 webpack 编译，比如图片，如果图片小于在 webpack 中的 loader 下设置的 limit 大小（可配置）他会被编译成 base64，从而在实际项目中减少 http 请求
通常我们会将文件放置在 src/assets 目录下，有如下原因
脚本和样式表被缩小并捆绑在一起以避免额外的网络请求
缺少文件会导致编译错误，而不是用户的 404 错误
文件名包含内容哈希，因此不用担心浏览器缓存旧版本
在实际项目中，公共文件夹 public 还是用他的作用的，如果你希望你的文件不被编译，比如 jquery.min.js 或者其他压缩好的 js 插件，就可以放在 public 文件夹中，这样还可以减少文件构建时间，减少构建文件的大小，如果把所有的静态资源全部放在 assets 文件夹中，你会发现最后打包出来的文件很大，导致首页白屏时间过长，所以可以把不会改动的静态文件放到 public 中
在 React 中使用公共文件夹 public
index.html
<link rel="stylesheet" href="%PUBLIC_URL%/base.css">
当运行 npm run build，Create React App 将替换 %PUBLIC_URL% 为正确的绝对路径，因此即使使用客户端路由或将其托管在非根 URL 上，项目也会正常工作。
在 JS 中，可以使用 process.env.PUBLIC_URL
render() {
return <img src={process.env.PUBLIC_URL + '/GD.png'} />;
复制代码
