Los marcos modernos como Vue y React comienzan con CSS en línea dentro de componentes individuales. Por ejemplo, en un componente de archivo único de Vue, incluimos todo el Javascript, HTML y CSS en un archivo .vue . Por lo general, hay un paso de compilación o algún cálculo que compila estos cambios en fragmentos, que se cargan en la página en función de los componentes que son visibles para el usuario.
Puedo apreciar que esta puede ser la forma más eficiente de compilar CSS para múltiples componentes y cargarlo en una página.
Mi pregunta se relaciona principalmente con el rendimiento. Supongamos que en lugar de compilar todos los estilos de componentes en fragmentos, React o Vue enviaron esto en su lugar, cuando se procesa un componente:
<div id="someComponent"> <!-- My component HTML goes here --> </div> <style> /* Associated styles */ #someComponent { color: red; } </style>Eso significa que en lugar de tener un archivo de fragmentos CSS, los estilos simplemente se alinean y se incluyen junto al componente con el que se relacionan en el sitio web en vivo.
Sé que esto es complicado, pero mi pregunta es, ¿hay algún problema de rendimiento al hacer esto? Hubiera pensado que esto en realidad podría ser más eficaz, ya que cargar un fragmento requiere una solicitud HTTP, que obviamente tiene una sobrecarga, mientras que esto se incluye en una sola solicitud HTTP cuando el usuario abre la página web.
Para cualquiera que se pregunte, aunque no pude hacer pruebas muy extensas, parece que hay algunos problemas de rendimiento al adoptar este enfoque. También conduce a cambios de diseño (CLS) ya que el CSS se carga en diferentes momentos.
Es bueno evitar hacerlo en general, ya que parece no traer beneficios perceptibles. El enfoque que finalmente elegí fue la expresión regular de todo el CSS del componente en línea y combinarlo en una gran porción en línea de CSS, que eliminó la solicitud HTTP.