前言

在刚学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="">        //绝对路径
或者
<img src="/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'} />;
}
或者
render() {return <img src={'/img/logo.png'} />;    //我在项目中使用这种无ip端口路径也是ok的
}

如果要引用assert包/img包下的图片，通过require()函数，参数附上路径

render() {return <img src={require('../img/logo.png')} />;
}

————————————————
版权声明：本文为CSDN博主「叉叉酱」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39782183/article/details/104751862

react——public和src/asserts包比较相关推荐

rhel6编译ssh的src.rpm包并修改spec参数
安全扫描要求屏蔽ssh版本信息,也就是说在你ssh -V的时候,不能够显示ssh的版本信息,我之后在网上查找了一些资料,都说需要使用tar包安装ssh,并在解压之后修改sshd.c文件,将versio ...
linux 编译src.rpm,CentOS6.5下编译src.rpm包的内核
CentOS6.5原生内核版本是 Linux 2.6.32-431.el6.x86_64 #1 SMP Fri Nov 22 03:15:09 UTC 2013 x86_64 x86_64 x86_6 ...
mysql src.rpm_从.src.rpm包中提取出完整的源码的方法
1 什么是完整的源码就是说,最初始的源码加上打了所有的patch后的源码,即最新的源码. 2 过程 2.1 从.src.rpm中提取完整的rpm工程文件 2.1.1 rpm to cpio rpm2 ...
Java中的四种访问权限:public、protected、包访问、private
所谓访问权限,指的就是本类中的成员变量.成员方法对其他类的可见性试想一想,当我们修改一个非常庞大的项目时,如果所有变量和方法都是公共权限,那么后端中任何类都有权限去修改它的变量和方法,很有可能修改后 ...
react 图片放在src里面还是public_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
React Native工程修改Android包名
默认初始化的React Native工程,生成Android工程的时候,包名默认是React Native工程的名字,跟一般Android工程com.company.xxx不一样. 这时候就需要手动修 ...
MacOS安装react。问题 -- npm全局包的权限问题
网上的教程有好多,在这里不一一列举,我只介绍我今天安装成功的步骤首先,在安装react之前要先配置好node 1.安装node 在这里下载node的安装包https://nodejs.org/en/ ...
react全局状态管理_rxv: 在React中用Vue3的reactivity包实现状态管理。
前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,react-easy-state,在hooks ...
mysql rpm 日志_mysql5.1.48-1的src.rpm包安装日志（一）
对linux的菜鸟我来说,装上这个有难度,特意记下来. 安装的系统是centos.升级到最高版本2.6.34,但是没成功,还没找原因. root@localhost lost+found)#rpm - ...

react——public和src/asserts包比较

前言

两者区别

react——public和src/asserts包比较相关推荐

最新文章

热门文章