Cómo 1Password redujo 90% el tiempo de compilación de su extensión de navegador con esbuild

• Al inicio del desarrollo, el tiempo de compilación era de unos 30 segundos y resultaba aceptable, pero a medida que se fueron agregando funciones, aumentó hasta 1 minuto con 10 segundos
• Los tiempos de compilación largos ralentizaban el proceso de desarrollo, aumentaban el tiempo de onboarding de nuevos desarrolladores y dificultaban mantener la concentración en las tareas cotidianas

Intento de mejora mediante un hackatón

• En enero recopilaron datos, redactaron una propuesta de proyecto para el hackatón, profundizaron su comprensión del sistema de compilación existente y buscaron maneras de perfilarlo
• Usaron OpenTelemetry y Jaeger para perfilar todo el proceso de compilación
  • El perfilado mostró que la ejecución de Webpack/Rollup ocupaba la mayor parte del tiempo total de compilación
  • Descubrieron que muchas dependencias pequeñas se compilaban una por una, por lo que había muchas oportunidades de paralelización
  • Confirmaron que, al principio, algunas tareas críticas tardaban más de lo necesario y retrasaban el resto del proceso de compilación
• Durante el hackatón se enfocaron en reducir el tiempo de bundling usando esbuild
  • Obtuvieron grandes mejoras de rendimiento al usar esbuild como loader de Webpack/Rollup (en el caso de Rollup, una reducción del 80%)
  • Al usar esbuild como bundler para reemplazar por completo a Webpack/Rollup, redujeron el tiempo de bundling en 90%
• Como resultado del proyecto del hackatón, redujeron el tiempo de compilación de la extensión en más de 70%, hasta dejarlo en alrededor de 15 segundos

Trabajo para llevarlo a producción

• Como en el proyecto del hackatón se usaron muchas soluciones temporales, para llevarlo a producción fue necesario reemplazarlas por una solución real
  • Migrar por completo del uso de Webpack y Rollup a esbuild
  • Unificar el proceso de compilación en un solo lugar
  • Resolver problemas en el procesamiento de recursos gráficos
  • Volver a agregar la verificación de tipos de TypeScript al proceso de compilación
  • Probar las compilaciones de producción y comparar tamaño y funcionalidad
  • Reflejar los cambios en las dependencias internas
  • Reproducir otros aspectos del sistema de compilación anterior, como la etapa de compilación de Sentry
  • Agregar manejo para navegadores que no son Chrome, polyfills y requisitos de compilación específicos de cada tienda
• Se realizó trabajo con énfasis en la verificación de tipos y la optimización del tamaño de los bundles

Agregar verificación de tipos a esbuild

• Como tsc es lento, es difícil usarlo junto con el proceso de compilación rápida de esbuild
• Usaron el plugin comunitario esbuild-plugin-typecheck para ejecutar tsc en un hilo worker y aprovechar la compilación incremental
• También implementaron su propio plugin simple de verificación de tipos para ejecutar procesos de CLI de tsc en paralelo por cada raíz de paquete
  • Convirtieron los mensajes de diagnóstico de compilación de tsc al formato nativo de esbuild para mejorar la legibilidad
  • Usaron la bandera tsc --listFilesOnly y el Metafile de esbuild para verificar automáticamente que todas las entradas de compilación estuvieran siendo sometidas a verificación de tipos

Mejora del tamaño de los bundles de producción

• Analizaron los bundles de producción usando el analizador de tamaño de bundles de esbuild
  • Descubrieron un problema por el que tanto la compilación ESM como la CJS de la biblioteca de componentes de UI quedaban incluidas en el bundle
  • Corrigieron una configuración incorrecta en una biblioteca interna y redujeron el tamaño del bundle (3.3MB -> 2.1MB)
  • Confirmaron el efecto de reducción de tamaño en varios entry points

Impacto y conclusión

• Como resultado de la implementación en producción, el tiempo de compilación en warm builds se redujo en más de 90%, hasta quedar en alrededor de 5 segundos
• En modo watch, es posible reconstruir en menos de 1 segundo cuando cambian archivos TypeScript
• Los desarrolladores reportaron que su eficiencia de trabajo mejoró significativamente gracias al nuevo sistema de compilación
• Gracias al esfuerzo del equipo de QA y de desarrolladores voluntarios, la transición al nuevo sistema de compilación se realizó sin problemas
• Según una encuesta de satisfacción de desarrolladores, la insatisfacción con los tiempos de compilación cayó drásticamente de 97% a 5%
• esbuild es una herramienta excelente, y un proyecto de hackatón es ideal para este tipo de trabajo