En mi aplicación Rails 6.x, estaba usando Webpacker para compilar mis estilos y transpilar mi JS.
Como parte de la actualización de mis aplicaciones a Rails 7, eliminé Webpacker (ya que ya no se recomienda) y cambié a las nuevas gemas cssbundling-rails y jsbundling-rails.
Estos son súper rápidos y mucho más fáciles de usar.
Sin embargo, acabo de ejecutar un informe de Lighthouse en mi sitio y creo que ciertas páginas de mi sitio están cargando todo mi JS, aunque gran parte ni siquiera se ejecuta en la mayoría de las páginas.
Por ejemplo, tengo un script que reproduce audio usando la biblioteca Plyr en una página.
Mi script para esto, en la parte superior tiene una importación como:
import Plyr from 'plyr'
Intenté condicionalizar esto verificando si existe un elemento específico en la página antes de importar, pero no me gustó eso.
¿Cómo puedo realizar algunas de estas importaciones solo cuando son necesarias y no cuando no lo son?
¿Cómo convierto lo anterior para que sea condicional?
Gracias, Neil
ACTUALIZAR:
Mi guión actualizado:
if (document.querySelector('audio')) { let audio = document.querySelector('audio'); import('plyr').then(Plyr => { const player = new Plyr(audio, { 'controls' : ['play'], 'autoplay' : false }) }); }El error que estoy recibiendo es:
No capturado (en promesa) TypeError: Plyr2 no es un constructor.
¿Cómo puedo acceder al objeto Plyr ?
En lugar de usar import Plyr from 'plyr' , puede usar la importación dinámica de import('plyr') que puede usar en cualquier lugar, incluida la lógica condicional. Tenga en cuenta las promesas de devolución de importaciones dinámicas. Entonces asíncrono/espera Entonces,
if(somevalue === true){ import('plyr').then(resp => doSomething) }