javascript - plugin - webpack static site
¿Es el cargador de estilo webpack destinado a cargar todos los css? ¿O simplemente aplicación específica css? (1)
Estoy tratando de hacer que mi proceso de diseño de front-end sea más modular, y estoy explorando un webpack . Admite un cargador de estilo , que le permite importar un archivo css e inyectarlo en el documento de la siguiente manera:
require("style/url!file!./file.css");
// => add a <link rel="stylesheet"> to file.css to document
Sin embargo, mi enfoque principal está en los sitios web y no en las aplicaciones web 1 , por lo que es extraño agregar el css a través de javascript. Pero es posible que esté pasado de moda, así que me pregunto: ¿se debe usar el cargador para todos los css o solo para cargar partes pequeñas y condicionales de css?
Y si se puede usar para cargar todos los archivos css, ¿habría alguna penalización al usar un paquete web generado por bundle.js para inyectar el css en lugar de vincular directamente un archivo css en el html? Además, ¿obviamente se rompe si javascript no está habilitado?
1: La diferencia es que tengo muy poco contenido dinámico, javascript solo desempeña un papel secundario en estos sitios web, y no estoy enrutando con javascript sino que tengo archivos .html estáticos para páginas
Donde sea posible, incluya CSS con el propio HTML. Los navegadores modernos comenzarán a buscar el CSS a medida que se analiza la página, a veces incluso antes de que JavaScript haya comenzado a descargarse. Obtendrá una mejora en la velocidad de representación de la página haciendo piezas importantes fuera de un cargador.
Además, si se adhiere a un estilo principal de "núcleo", puede beneficiarse del almacenamiento en caché, que nuevamente se cargará más rápido que JavaScript.
http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/
En su ejemplo, lo he hecho dividiéndolo en varias partes y utilizando cargadores y agrupadores para los elementos específicos que he cargado en la página. La apariencia de la aplicación, la marca, etc. se carga desde el marcado, y el comportamiento que controla mi IU específica (por ejemplo, el diseño de un formulario en particular) se realiza con un agrupador o empaquetador.