We’ve got something big to share - Circle the date for May 19th. Register now!

By Jason Lengstorf in Guides & Tutorials

Activation des builds incrémentiels de Gatsby sur Netlify

Cette page est disponible en English, Français.

Gatsby a récemment publié des builds incrémentiels, soit une amélioration qui réduit la quantité de travail nécessaire pour construire un site Gatsby. Dans cette publication, nous allons expliquer comment activer les builds incrémentiels de Gatsby sur Netlify.

Étape 1 : Effectuer la mise à niveau vers Gatsby v2.20.4 ou version ultérieure

Gatsby a introduit des builds incrémentiels dans la version 2.20.4. Veillez donc à mettre à niveau votre site Gatsby vers la dernière version.

# this will upgrade to the latest version of Gatsby
npm install gatsby@latest

Étape 2 : Installer cross-env

La plupart des invites de commande Windows se noient lorsque vous définissez des variables d’environnement dans le cadre de votre commande build. Avec cross-env, inutile de vous soucier de la nature de l’environnement que vous utilisez.

npm install cross-env

Étape 3 : Ajouter le plug-in Gatsby Cache Netlify Build

Les builds incrémentiels reposent sur le cache de Gatsby. Nous devons donc activer netlify-plugin-gatsby-cache, qui conservera les répertoires public et .cache de Gatsby entre les builds.

Vous pouvez utiliser ce lien d’installation en un seul clic pour l’interface utilisateur Netlify ou vous renseigner sur l’installation d’un plug-in de build basée sur un fichier dans notre documentation.

Étape 4 : Ajouter l’indicateur pour activer les builds incrémentiels de Gatsby

Enfin, mettez à jour votre commande build dans package.json (ou à l’endroit où vous avez défini votre commande build) pour inclure l’indicateur de builds incrémentiels :

    "scripts": {
      "develop": "gatsby develop",
-     "build": "gatsby build"
+     "build": "cross-env GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages"
    },

Nous avons ajouté ici l’indicateur facultatif --log-pages pour voir ce que Gatsby construit à chaque exécution. N’hésitez pas à l’ignorer si vous ne voulez pas voir les journaux supplémentaires.

Étape 5 : Apporter une modification à votre CMS et voir les builds incrémentiels

Une fois que nous avons apporté les modifications ci-dessus, notre site Gatsby sera exécuté avec les builds incrémentiels activés ! Cela signifie qu’une fois les modifications apportées à un CMS pris en charge (Gatsby prend en charge Contentful, Sanity, DatoCMS et CosmicJS lors de l’écriture avec WordPress et Drupal en phase alpha), Gatsby ne reconstruira que les parties du site concernées par les données modifiées.

Si nous examinons les journaux de build, le premier build affichera un build complet avec toutes nos pages :

2:00:43 PM: info Done building in 41.429647017 sec
2:00:43 PM: info Built pages:
2:00:43 PM: Updated page: /design-research-program
2:00:43 PM: Updated page: /offline-plugin-app-shell-fallback/
2:00:43 PM: Updated page: /
2:00:43 PM: Updated page: /404/
2:00:43 PM: Updated page: /404.html

Sur les builds répétés, nous voyons que le build Gatsby est beaucoup plus rapide et reconstruit uniquement la page qui a été modifiée :

2:03:56 PM: info Done building in 17.691847403 sec
2:03:56 PM: info Built pages:
2:03:56 PM: Updated page: /design-research-program

Vous pouvez utiliser les builds incrémentiels de Gatsby dès aujourd’hui !

Si vous avez un site Gatsby, vous pouvez activer les builds incrémentiels dès aujourd’hui !

Essayez-les et bénéficiez de builds qui rendent votre site Gatsby encore plus rapide et encore plus éblouissant!