Con Vite podemos importar todo el archivo JSON de una manera muy simple, aunque también podemos traer partes específicas para optimizar el código y mejorar el rendimiento en producción.

Importar JSON

Para empezar deberemos crear un archivo JSON, en este caso lo nombraré data.json y contendrá la siguiente información:

fullscreen
{
    "user": {
        "name": "Diana",
        "lastname": "Martinez"
    },
    "session": {
        "id": "string session"
    }
}

Para importar todo el archivo JSON lo haríamos igual que como lo hemos estado haciendo. Escribimos import, le damos un nombre e indicamos donde se encuentra.

import data from "./data.json";

Ahora para visualizarlo creamos una etiqueta y dentro de esta usamos JSON.stringify para convertir nuestro objeto en un string.

<pre>${JSON.stringify(data)}</pre>

Como podrás ver en el navegador estamos trayendo todos los datos del archivo JSON, pero también podríamos visualizar una parte más especifica, como solamente el usuario, para esto solo tendríamos que destructurar los datos, de la siguiente forma:

• Visualizamos solo los datos de user: <pre>${JSON.stringify(data.user)}</pre>
• Visualizamos solo los datos de session: <pre>${JSON.stringify(data.session)}</pre>

Import especifico

Con el método anterior estamos importando todo el archivo y podemos visualizar partes específicas destructurando el objeto, pero aun así seguimos importando todo el archivo con esos datos que no vamos a utilizar.

Para optimizar esto podemos destructurar los datos desde el import y de esta forma estaríamos trayendo solo lo que necesitamos. La forma seria nombrando nuestro import con el dato que queremos traer y encerrarlo en llaves. En el siguiente ejemplo estaríamos importando solo los datos de user:

import { user } from "./data.json";

Contribución creada por: Jofay Zhan Segura