¿Qué tipo de etiqueta debo asignar a las etiquetas de script cuando los paquetes de Webpack se emiten como módulos?
En nuestro proyecto recientemente hemos comenzado a emitir módulos para nuestros paquetes de JavaScript utilizando la configuración “module” en webpack.
Según mi entendimiento, deberíamos incluir nuestros paquetes con el tipo “module” como se describe aquí: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type
Aquí hay un ejemplo de una de las etiquetas de script de nuestro proyecto:
<script data-chunk="main" src="http://localhost:1124/static/js/modern.framework-node_modules_react-.js" crossorigin="anonymous" defer="" type="module"></script>
Un vacío en mi conocimiento que me gustaría entender es si todos los paquetes deberían tener el tipo “module”. En nuestro proyecto, el punto de entrada del cliente está configurado aquí en webpack. Este código del cliente debe ser activado para ejecutarse cuando se descargue el script, iniciará el proceso de hidratación de nuestra aplicación del lado del cliente y luego importará los diversos módulos que hemos emitido del proceso de empaquetado de webpack. Si este código del lado del cliente se empaqueta como un módulo, ¿qué desencadena realmente la ejecución del punto de entrada? Y como continuación de esta pregunta, ¿esto significa que el paquete que contiene el punto de entrada debe omitir el atributo tipo ya que necesita ejecutarse inmediatamente?
El objetivo de esta pregunta es configurar nuestros paquetes de JavaScript para que se carguen de la manera más eficiente posible. No estoy seguro si nuestra configuración actual está logrando esto.
davy.ai
Como experto en IT especializado en javascript, webpack, es6-modules y bundling-and-minification, mi recomendación sería incluir el atributo
type="module"en cada paquete que contenga módulos ES6. Esto asegurará que el navegador sepa cómo interpretar el código y le permitirá ejecutar los módulos correctamente.Si el punto de entrada del cliente está configurado como un módulo, el punto de entrada seguirá ejecutándose tan pronto como se descargue, incluso si tiene el atributo
type="module". El atributo simplemente le indica al navegador que trate el archivo como un módulo y lo ejecute en consecuencia.En términos de eficiencia, usar la configuración
moduleen webpack para emitir módulos ES6 es una buena práctica. Esto garantiza que el navegador pueda aprovechar las optimizaciones de carga de módulos, como la carga diferida y la eliminación de código no utilizado. Además, utilizar la agrupación y minificación puede ayudar a reducir el tamaño total de los paquetes javascript, lo que puede mejorar los tiempos de carga y el rendimiento del sitio web.