Tengo una aplicación móvil react js. Estoy tratando de acelerar la carga de la pantalla inicial. En mi investigación, descubrí que la mayoría del código JS no se usa en la pantalla de inicio, y la carga diferida sería una buena solución. Primero traté de usar react.lazy() en las rutas y esto funcionó en el desarrollo con implementación en caliente, pero cuando genero JS estáticos para publicar en el servidor de lanzamiento, no funciona, a pesar de que el paquete redujo el tamaño. Se muestra como una ventana emergente "sin conexión".

Dividí mis archivos JS en fragmentos usando el paquete web, y podría poner solo paquetes esenciales en un fragmento (proveedor inicial) y no esenciales en otro (prefechVendor). El problema de que los archivos webpack JS bloquean la pantalla para pintar primero, se carga justo después de que cada JS finaliza, incluso el que no es necesario. Cuando pruebo en la pestaña de desarrollador de Chrome, la "Cobertura JS" muestra que "prefetchVendor" no se usa en un 99.9% y que initialVendor se usa en un 80% (cubierto). Pero cuando bloqueo la carga de prefetchVendor, no muestra la página.

Mi webpack.producción.js

 optimization: { runtimeChunk: 'async', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 0, cacheGroups: { default: { minChunks: 3, reuseExistingChunk: true, }, initialVendor: { test: /[\\/]node_modules[\\/](react-bootstrap|react|react-dom)[\\/]/, name: "initialVendor" }, prefetchVendor: { test: /[\\/]node_modules[\\/](pdfjs-dist|@nivo|node-forge|moment|moment-timezone|lottie-web|react-pdf)[\\/]/, name: "prefetchVendor" }, vendor: { test: /[\\/]node_modules[\\/](!react-bootstrap)(!pdfjs-dist)(!@nivo)(!node-forge)(!react-pdf)(!moment)(!moment-timezone)(!lottie-web)[\\/]/, name: "vendor" }, }, }, runtimeChunk: true,

Mis rutas.jsx

 import { component1 } from 'features/component1'; import { component2 } from 'features/component2'; import { component3 } from 'features/component3';

y luego los componentes que incluye las librerías

Creo que este 0.01% de uso en la cobertura (me muestra Chrome) es un paquete web de código insertado en el fragmento. ¿Cómo puedo definir la configuración del paquete web para cargar "prefetchVendor" después de los demás y de forma asíncrona?