Como habilitar builds incrementais do Gatsby no Netlify - Willian Justen
24 de abril de 2020 • 3 min de leitura
Como habilitar builds incrementais do Gatsby no Netlify
Tenha builds muito mais rápidos com a nova atualização do Gatsby Incremental Build.
Dando uma leve pausa dos vídeos de dicas de CSS, o post de hoje vai ser rapidinho, mas foi extremamente útil para mim e tenho certeza que será super útil para todos aqueles que já fizeram o meu Curso de Gatsby: Crie um Site PWA com React, GraphQL e Netlify CMS.
Ontem o Gatsby lançou essa nova feature chamada de Experimental Page Build Optimizations for Incremental Data Changes, onde eles criam um cache e fazem o build somente do que é necessário, fazendo com que certos builds que demoravam ~10min passem a demorar ~1min!
Existem duas vantagens nisso, a primeira e mais óbvia é o ganho de tempo, já que você terá algo no ar muito mais rápido. A outra questão é que se você utiliza o Netlify gratuito deve saber que eles deixam somente 300 minutos/mês. Ou seja, em 30 deploys você acabaria gastando toda a quota do mês e isso não é nada legal né?
Bom, vamos deixar de papo furado e fazer logo isso funcionar né? Dá o play nessa playlist de Eletronic Focus e vamos nessa!
Passo 1 - Atualize o Gatsby para v2.20.4 ou maior
Essa nova feature veio somente na versão mais atual, então rode:
# se utilizar npm
# se utilizar yarn
yarn upgrade gatsby@latest
Passo 2 - Habilite o Netlify Build Plugins
Para que a gente consiga salvar o cache entre os builds é necessário utilizar um build plugin, como essa é uma feature bem nova do Netlify, é necessário que você habilite através do seguinte link.
Para saber mais informações do Beta, só entrar neste link.
Passo 3 - Adicione o Gatsby Cache Netlify Build Plugin
Os builds incrementais dependem completamente do cache do Gatsby, portanto precisamos habilitar o netlify-plugin-gatsby-cache, que vai persistir as pastas public e .cache entre os builds.
No seu arquivo netlify.toml na raiz do projeto, adicione o seguinte:
E instale o netlify-plugin-gatsby-cache no seu projeto com o comando:
// ou se usar yarn
Passo 4 - Adicione a flag para habilitar o Gatsby incremental builds
Atualize o comando de build no seu package.json para incluir a seguinte flag:
"build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages"
A flag --log-pages irá mostrar quais páginas o Gatsby fez build em cada deploy, é opcional e se você quiser, basta remover.
Passo 5: Faça alguma mudança e veja funcionando!
Assim que você fizer todas as mudanças acima, o site já estará preparado para os builds incrementais. Na primeira vez que você subir alguma mudança, ele irá demorar o mesmo tempo que já demora atualmente, porém já guardando os arquivos no cache.
Na segunda vez que você rodar, prepare-se para um build bem mais rápido!
É isso aí galera, foi um post rapidinho, mas que espero que seja útil para todos vocês, eu amo a dupla Gatsby+Netlify e eles estão cada vez mais se superando!
E se você não chegou a fazer meu curso de Gatsby, aproveita esse lindo cupom de desconto e corre logo para estudar!