Tengo una aplicación de varias páginas que no usa Node. Tiene un montón de archivos HTML y JavaScript. Quiero renderizar los componentes de React en la aplicación, lo cual descubrí que puedo hacer con ReactDOM.render .
Sin embargo, estoy construyendo los componentes de React por separado en un proyecto hecho con npx create-react-app . Puedo usar npm run build que me da un archivo main.js que contiene una versión lista para producción de todos mis componentes.
Puedo agregar este archivo main.js a mis archivos HTML con una etiqueta de secuencia de comandos para que mis componentes se representen en mi aplicación de varias páginas.
Sin embargo, el problema es que cuando run npm build obtengo un archivo main.js que contiene todo. Esto no es bueno porque la aplicación se ejecutará demasiado lentamente si tengo que cargar todos mis componentes de React en el archivo main.js cada vez que voy a una página nueva.
En cambio, estoy buscando cargar solo los componentes específicos que necesito para una página.
Ejemplo:
Digamos que tengo un componente test1 y un componente test2. Page1 tiene un script para usar test1, por lo que solo quiero cargar test1 en Page1. Page2 tiene un script para usar test2, por lo que solo quiero cargar test2 en Page2. Por lo tanto, necesito un archivo test1.js y un archivo test2.js después de npm run build
¿Cómo haría esto?
Suena como un caso de uso para Code Splitting .
Si desea dividir por página con React Router, puede hacer lo siguiente:
import React from "react"; import { render } from "react-dom"; import { BrowserRouter, Routes, Route, } from "react-router-dom"; const Home = React.lazy(() => import("./Home")); const Contact = React.lazy(() => import("./Contact")); render( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/contact" element={<Contact />} /> </Routes> </BrowserRouter>, document.getElementById("root") );Esto debería generar múltiples archivos JS para diferentes componentes (por ejemplo, páginas) cuando se usa con algunas herramientas de compilación estándar como create-react-app .