javascript - React 中组件的 CSS 究竟是什么时候加载/应用的？

Question

我有我的 app.js 导入someComponent.js. someComponent.js然后进口someStyles.css. 但app.js只会someComponent.js在单击按钮时使用/渲染。

用户的浏览器究竟何时会加载并应用 someStyles.css？无论是否按下按钮，它都会在加载页面时立即加载，还是仅在实际呈现组件时请求并加载所述 CSS 文件？

标签： javascriptcssreactjsjsxloading

Answer 1

很难回答这个问题，因为它取决于您的应用程序是如何设置和构建的。在开发和部署应用程序时，您的结果甚至可能会有所不同。

但是，有一些方法可以使用您的浏览器开发工具自行验证。

每个主要浏览器都有开发人员工具，其中包含有关“网络”流量的部分。如果您在“网络”选项卡上打开您的开发人员工具，然后刷新您的页面，您将能够看到从服务器获取资源的时间顺序。

您甚至可以应用一些网络限制来查看页面上的实际效果。

看：

• 铬：https ://developer.chrome.com/docs/devtools/network/#load
• 边缘：https ://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/#log-network-activity
• 火狐：https ://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#opening_the_network_monitor

您可能也有兴趣阅读有关代码拆分的信息，以在加载组件时进行更改。