Comment bénéficier du tree-shaking et du code-splitting lors du chargement de JSON dans Nuxt ?

Question

J'ai une application nuxt, dans laquelle j'ai beaucoup de messages. J'ai récemment refactorisé le projet et je ne veux pas generate tous les messages, car cela prend trop de temps.

Au lieu de cela, j'ai une page où je récupère le contenu de l'article correspondant par le biais d'une requête url : www.mypage.com/posts/?post=my-post-slug

Parce que le contenu se trouve dans des fichiers json statiques, par exemple dans :

/static/data/posts/my-post-slug.json
/static/data/posts/my-post-slug_2.json
/static/data/posts/my-post-slug_3.json
/static/data/posts/my-post-slug_n.json

J'ai lu le post https://github.com/nuxt/nuxt.js/issues/123 sur la façon de charger du json de la meilleure façon possible.

J'ai décidé de faire quelque chose de ce genre dans le récupérer() crochet :

// ... simplified code
async fetch() {
  let postSlug = this.$route.query.post

  const post = this.$axios
    .get(`/posts/posts.de.${postSlug}.json`)
    .then((data) => {
      return data?.data
    })
    .catch((error) => {
      console.error('error: ', error)
      const code = parseInt(error.response && error.response.status)
      if (code === 404) {
        this.$nuxt.error({ statusCode: 404, message: 'Post not found' })
      }
    })

  this.activePost = post?.items?.[0] || false
}

Comme je l'ai déjà dit, je ne génère pas les articles proprement dits, mais je génère toutes les urls des articles dans mon sitemap.xml.

Lors de l'exécution du programme generate in analyser J'ai maintenant une taille de paquet énorme (app.js), et je n'arrive pas à comprendre pourquoi... -> Voir l'image ci-jointe. (Note : app.js a une taille ridicule de 34MB !!!!)

1. Je ne comprends pas pourquoi tous mes post jsons apparaissent dans la partie statique et dans la partie dist du bundle ???
2. Je ne comprends pas du tout pourquoi ils y figurent. Je veux qu'elles se trouvent dans le dossier statique, mais qu'elles ne soient pas incluses dans le bundle de l'application. (vous pouvez voir qu'il y a des fichiers comme events.bundle.de.json inclus. J'en ai besoin pour récupérer une liste de tous les messages, par exemple. Je le fais également dans mon fetch hook uniquement.

Je serais très heureux si quelqu'un pouvait m'expliquer pourquoi ces fichiers sont inclus (deux fois) !

Answer 1

Ces fichiers ne sont pas inclus "deux fois". Vous en avez besoin, donc vous les avez localement dans votre fichier static dossier.

En attendant, vous devriez probablement les placer à l'intérieur de votre src si vous n'avez pas envie/besoin de les exposer publiquement et de bénéficier du code-splitting grâce à Webpack comme expliqué dans le post que vous avez linké (qui est toujours valable même s'il date de 2017 !).

Ici, puisque vous faites un appel axios et que vous utilisez target: 'static' Il permet de regrouper l'ensemble des éléments pour qu'ils fonctionnent même sans JS, et il le fait à l'avance. Ainsi, afin d'avoir toutes les possibilités, il les inclut toutes dans le paquet final, je pense.

Si vous souhaitez ne charger que ce dont vous avez besoin sans pour autant expédier une grande quantité de marchandises, vous devez vous assurer que les marchandises ne sont pas trop lourdes. static vous devez les importer dynamiquement. Vous pouvez utiliser un importation dynamique : ne charger que le JSON nécessaire en transmettant le fichier postSlug .

PS : sur le plan du style, je préfère utiliser async/await ( .then est obsolète) et peut-être aussi $axios.$get .

Answer 2

Bien que je pense que la réponse de @kissu réponde à la question posée dans le titre, ce n'est pas la solution à mon problème. Par souci d'exhaustivité, je vais poster ce que j'ai découvert après de longues heures de débogage. Je ne comprends toujours pas pourquoi cela s'est produit, mais peut-être que quelqu'un pourrait faire un commentaire à ce sujet :

Dans mon projet nuxt, j'utilise un fichier utilitaire getData.js dont j'importe une fonction getDataServer dans l'un de mes modules de magasin vuex.

// vuex store module: store/data.js
import { getPreviewData } from '~/api/getData'

Le code se présente comme suit :

// getData.js

// Get static JSON file (e.g. basic.de.json or posts.de.1.json)
export function getDataServer(fileProps) {
  return require(`~/${fileProps.path}${fileProps.name}.${fileProps.lang}${
    fileProps.page ? `.${fileProps.page}` : ''
  }.json`)
}

Ce n'est qu'en important et même pas en exécutant cette fonction que webpack regroupera EVERY .json qu'il peut trouver dans mon dossier Root dans mon app.js.

C'est pourquoi un dossier dist est apparu dans ma liasse, s'il n'a pas été supprimé. (Le point dont je parle dans ma question originale, où j'ai des choses incluses deux fois).

J'ai même créé des dossiers supplémentaires et des fichiers .json pour voir, et ils ont tous été regroupés quoi qu'il arrive.

Ce n'est qu'après avoir retiré le getData.js de mon projet, ma liasse est devenue propre.

Je comprends qu'avec la require webpack ne peut pas faire d'arborescence, donc je m'attendais à ce que certaines fonctions de séparation de code ne fonctionnent pas, mais ce à quoi je ne m'attendais pas, c'est que ce bout de code puisse fonctionner. reçoit automatiquement chaque .json dans mon dossier ...

Quelqu'un sait-il pourquoi l'importation de cette fonction l'exécute d'une manière qui agit comme un joker pour tous les .jsons ? Pour moi, cela n'a toujours pas de sens.

Merci et bravo.