React js importing a large data file (json)

Tengo un archivo JSON grande (700MB), es un índice del motor de búsqueda.

el problema es cuando ejecuto el script de inicio que permanece en la etapa de compilación para siempre. e intenté construir todo el proyecto pero responde con

fuera de la memoria (por cierto, le doy más de 20 GB, y todavía el mismo)

todo lo que quiero hacer es importar este archivo antes (desafortunadamente todas las características basadas en este archivo )

Pregunta hecha hace 3 años, 4 meses, 28 días - Por algorithmadeptc6cb

3 Respuestas:

  • Tendrás que reevaluar y reingenierar tu arquitectura y cómo manejas los datos. El enfoque prevelante es tener un servidor con un punto final que proporcione los datos. Su aplicación React debe cargar pequeño tamaño, y obtener los datos para trabajar desde el punto final.

    Respondida el Dec 17, 2020 a las 16:54 - por bugbusterx

    Votos positivos: 0 | Votos negativos: 0

  • El problema de importar un archivo JSON tan grande en un proyecto de React puede generar problemas de memoria, como en tu caso. Aquí hay algunas sugerencias que puedes probar para resolver este problema:

    • Dividir el archivo JSON: En lugar de importar un solo archivo JSON grande, considera dividirlo en varios archivos más pequeños y luego importar solo la parte que necesitas en cada componente o función.
    • Cargar el archivo JSON de forma asíncrona: En lugar de importar el archivo JSON directamente en tu archivo de código, intenta cargarlo de forma asíncrona usando una llamada a la API fetch o axios. Esto puede ayudar a reducir la carga en la memoria durante la compilación.
    • Implementar lazy loading: Si el archivo JSON no es necesario para cargar la página inicialmente, considera implementar lazy loading para cargar el archivo solo cuando sea necesario.
    • Utilizar una base de datos o API: Si el archivo JSON es demasiado grande para importarse directamente, considera almacenar los datos en una base de datos u ofrecerlos a través de una API para acceder a ellos de manera más eficiente.
    • Optimizar el archivo JSON: Si es posible, revisa el archivo JSON para asegurarte de que esté optimizado y que no haya datos redundantes o innecesarios que puedan estar contribuyendo al tamaño y la carga en memoria.

    Espero que estas sugerencias te sean de ayuda para resolver el problema de importar un archivo JSON grande en tu proyecto de React. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 18, 2020 a las 16:55 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución 1: Uso de carga diferida

    Divide tu archivo JSON en fragmentos más pequeños y cárgalos de forma diferida utilizando el método Suspense de React. Esto divide el proceso de carga y evita que el compilador se quede sin memoria.

    Solución 2: Cargar el archivo fuera de React

    Crea un nodo HTTP o un servidor web que sirva el archivo JSON. Importa el archivo JSON desde el servidor en tu componente React utilizando una petición HTTP.

    Solución 3: Utilizar un paquete de indexación

    Existen paquetes de indexación como elasticlunr o lunr que pueden indexar datos JSON grandes fuera de React. Puedes utilizar estos paquetes para crear un índice y realizar búsquedas rápidamente sin cargar todo el archivo JSON en React.

    Solución 4: Importación dinámica

    Utiliza el componente import() de React para importar el archivo JSON de forma dinámica. Esto carga el archivo JSON solo cuando sea necesario, evitando que el proceso de compilación se quede sin memoria.

    Consejos adicionales:

    Asegúrate de que el archivo JSON esté bien formado. Reduce el tamaño del archivo JSON eliminando cualquier dato innecesario. Divide el archivo JSON en varios archivos más pequeños y cárgalos por separado. Utiliza un analizador JSON eficiente como fast-json-stringify.

    Ejemplo de uso de carga diferida con React Suspense:

    
import React, { Suspense } from 'react';

const MyComponent = () => {
  return (
    Cargando...
    }> ); }; const MyData = React.lazy(() => import('./largeData.json'));

    Respondida el Dec 18, 2020 a las 17:00 - por Gemini

Votos positivos: 0 | Votos negativos: 0