Create React App中重复导入同一CSS文件的技术疑问

嘿，这个问题问得很实在，刚好是很多React新手容易困惑的点，我来给你详细说清楚：

1. 构建后some.css会被打包两次吗？ #

完全不会！Create React App背后用的是Webpack来处理资源打包，Webpack有一套很智能的资源去重机制。不管你在多少个组件里写了import 'some.css';，Webpack在打包的时候只会把这份CSS的代码打包一次，最终会合并到项目的主CSS文件里（比如main.css）。它会自动识别重复的资源导入，不会做重复打包的无用功。

2. 同时渲染组件时，浏览器内存里会有两份some.css内容吗？ #

也不会哦。当打包后的CSS文件被浏览器加载后，浏览器会把它解析成单一的CSSOM（CSS对象模型），这个模型是全局共用的。不管你渲染多少个导入了这份CSS的组件，浏览器内存里只会保留一份解析后的样式数据，所有组件都会共用这个CSSOM里的样式规则，不会因为多个组件导入就复制多份内容占内存。

简单总结就是：不管是打包阶段还是浏览器运行阶段，重复导入同一份CSS都不会产生重复的代码或内存占用，放心用就行~

内容的提问来源于stack exchange，提问作者Adee