DEV Community

Cover image for Consejos para Optimizar Builds de Gatsby, Hugo y Jekyll en Netlify
Carlos Mata
Carlos Mata

Posted on

Consejos para Optimizar Builds de Gatsby, Hugo y Jekyll en Netlify

Las aplicaciones estáticas están en auge gracias a su velocidad, seguridad y facilidad de despliegue. Netlify se ha convertido en una de las plataformas preferidas para alojar estos proyectos, pero al trabajar con generadores de sitios estáticos como Gatsby, Hugo y Jekyll, muchas veces nos encontramos con tiempos de compilación elevados y complicaciones en el flujo de trabajo. En este artículo, exploraremos estrategias y buenas prácticas para optimizar los builds de estos frameworks en Netlify.

1. Consejos Generales para Optimización

Independientemente del generador que utilices, hay prácticas que pueden ayudar a reducir el tiempo de compilación y mejorar la eficiencia:

  • Cacheo Inteligente: Utiliza el Netlify Build Cache para guardar directorios como node_modules, .cache y public entre builds. Esto disminuye la reinstalación de paquetes y la regeneración completa.

  • Control de Dependencias: Mantén tu package.json o Gemfile libre de dependencias innecesarias. Versiona solo lo que realmente utilizas.

  • Variables de Entorno: Define las variables en la interfaz de Netlify o en un archivo .env para habilitar modos de producción y ajustar parámetros de concurrencia.

  • Parallelización: Aprovecha los núcleos de la máquina de build siempre que el generador lo soporte.

  • Revisiones de Contenido: Utiliza Build Hooks para disparar compilaciones solo cuando el contenido de tu repositorio cambie realmente.

2. Optimización de Gatsby

2.1 Configuración de Caché de Netlify

Gatsby genera un directorio .cache muy pesado. Para mantenerlo entre builds, añade un archivo netlify.toml con:

[[plugins]]
package = "netlify-plugin-cache-nextjs" # También funciona para Gatsby
Enter fullscreen mode Exit fullscreen mode

2.2 Reducción de GraphQL y Plugins

  • Minimización de Consultas: Revisa gatsby-node.js y elimina queries no utilizados.

  • Concurrent Builds: Activa la variable GATSBY_PARALLEL_QUERY_RUNNING=true en las variables de entorno de build.

2.3 Imágenes y Assets

Actualiza a gatsby-plugin-image, que es más rápido y eficiente que gatsby-image. Utiliza gatsby-source-filesystem con ignore: [/drafts/] para excluir archivos de borrador.

3. Optimización de Hugo

3.1 Flags de Compilación

Ejecuta el comando:

hugo --gc --minify --enableGitInfo
Enter fullscreen mode Exit fullscreen mode

Esto reduce archivos temporales, comprime HTML, CSS y JS, y permite usar datos de Git solo si es necesario.

3.2 Organizar Contenido y Módulos

Divide contenido grande en secciones y utiliza módulos para importar solo lo necesario. Considera usar un CDN para imágenes en lugar de compilarlas localmente.

3.3 Cache y Dependencias

Guarda en caché la carpeta resources generada por Hugo Pipes y el binario de Hugo en Netlify.

4. Optimización de Jekyll

4.1 Plugins y Gems

Asegúrate de usar versiones fijas en tu Gemfile:

gem "jekyll", "4.2.2"
gem "jekyll-sitemap", "1.4.0"
Enter fullscreen mode Exit fullscreen mode

Evita gems pesadas como jekyll-admin en producción.

4.2 Configuración de Netlify

En tu netlify.toml, define:

[build]
command = "bundle exec jekyll build --incremental"
cache = ["vendor/bundle"]
publish = "_site"
Enter fullscreen mode Exit fullscreen mode

Activar --incremental acelera recompilaciones posteriores.

4.3 Recursos Estáticos

Incluye versiones optimizadas de imágenes y fuentes en la carpeta assets.

5. Tabla Comparativa de Estrategias

Aspecto Gatsby Hugo Jekyll
Cache .cache, public, node_modules resources/_gen, binario Hugo vendor/bundle
Minificación gatsby-plugin-minify --minify jekyll-minifier
Builds Concurrentes PARALLEL_QUERY_RUNNING Multicore automático No soportado
Optimización de Imágenes gatsby-plugin-image Hugo Pipes Preprocesadas manualmente

Optimizar los builds en Netlify es crucial para mejorar la eficiencia y rapidez de tu flujo de trabajo. Aplicar estas prácticas no solo reducirá los tiempos de despliegue, sino que también ofrecerá una experiencia más estable y rápida a tus usuarios. Para más información, consulta la documentación oficial de Netlify, Gatsby, Hugo y Jekyll. ¡Optimiza tu sitio y mejora tu productividad hoy!

Top comments (0)