No es específicamente una pregunta de Rails, sino una pregunta dentro de una aplicación de Rails.

En mi aplicación, estoy usando la gema jsbundling-rails configurada con esbuild .

Esta gema agrega una línea de build a mi archivo package.json . Funciona y compila todo mi JS y funciona bien. Sin embargo, descubrí que el archivo generado es bastante grande, así que comencé a buscar formas de optimizarlo.

Mi declaración de esbuild en este punto se ve así:

 "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"

En primer lugar, pensé que podría intentar condicionar mis importaciones. Por ejemplo, solo impórtelos cuando sean realmente necesarios. Hice otra pregunta sobre cómo hacer eso aquí .

Aprendí mucho investigando eso, pero al final del día no hizo ninguna diferencia en la salida de mi JS extrañamente.

Chrome actualmente dice que mi archivo JS principal tiene un 91% de código sin usar. Parece que todas las importaciones todavía se están compilando juntas, ya sea que se importen de forma estática o dinámica. ¿Por qué puede ser esto?

Luego busqué más en esbuild , vi la bandera --splitting . Sonaba razonablemente correcto, así que actualicé mi script de build para que sea:

 "build": "esbuild app/javascript/*.* --bundle --splitting --format=esm --sourcemap --outdir=app/assets/builds"

Esto causó una gran cantidad de archivos JS generados (creo que se los conoce como "trozos".

Ejecuté mi aplicación y el JS no se pudo cargar. La consola dijo que

SyntaxError no capturado: no se puede usar la declaración de importación fuera de un módulo

No estaba 100% seguro de por qué era así, pero supuse que necesitaba agregar el type: "module" a mi javascript_include_tag en la vista de diseño de mi aplicación Rails.

Esto hizo que el JS se cargara (lo cual es bueno :-))

PERO... El porcentaje de código JS no utilizado sigue siendo el 84% de mi application.js

Entonces... mis preguntas son las siguientes:

1. ¿Funciona mi importación dinámica de módulos?
2. ¿Por qué la importación estática o dinámica parece no hacer ninguna diferencia?
3. ¿Cómo puedo reducir efectivamente el tamaño del código de salida y reducir el porcentaje no utilizado de JS en mi página de inicio?

Todo esto comenzó porque ejecuté la prueba Lighthouse de Google en mi sitio e informó que mi Estructura y Accesibilidad eran prácticamente perfectas, pero el rendimiento era <40. Mi objetivo es resolver esto.

Espero escuchar de usted con ideas sobre cómo puedo tratar de arreglar esto y mejorar mi puntaje de Lighthouse Performance.