使用create-react-app脚手架创建项目
npx create-react-app my_project --template typescript
public文件夹和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中。
来源:https://juejin.cn/post/6996280833862533157