React中从index.html与index.tsx加载样式的差异及性能选型

直接说结论：从index.tsx引入你的index.css和其他样式文件，比从public/index.html手动引入性能更好，完全没必要用后者。

具体原因 #

• 打包优化拉满：Create React App自带的webpack会对入口文件里引入的CSS做压缩、文件名哈希这些优化。生产环境下生成的CSS是压缩后的，体积更小；而且文件名带哈希，浏览器能精准缓存，用户下次访问直接读缓存，不用重新下载。要是从index.html引入，webpack管不到这些文件，只能原样加载，没法享受到这些优化。
• 加载更合理：从index.tsx引入的CSS会和你的应用代码绑定，webpack会帮你安排资源加载顺序，不会出现样式加载滞后或者多余的HTTP请求。手动在index.html加的话，万一没处理好，可能多一个请求，反而拖慢首屏。
• 1000行CSS根本不是事儿：1000行的CSS压缩后也就几十KB，不管哪种方式加载都快，但经过webpack优化后会更快一点，完全不用纠结体积问题。

额外建议 #

要是以后index.css越写越长，可以考虑把第三方组件的样式拆分到对应的组件文件旁边（比如用CSS Modules或者styled-components这类方案），但目前1000行的规模完全没问题，继续从index.tsx引入就好。

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