I have a react js mobile app. I'm trying to speed up the initial screen loading. On my research found that most of the JS code aren't used on home screen, and lazy load would be a good solution. First I've tried to use react.lazy() on the routes and this worked on development with hot deploy, but when I generate static JS's to publish on release server, it doesn't work, despite the pack reduced the size. It shows like a "no connection" popup.

I've split my JS files in chunks using webpack, and I could put just essential packages on a chunk (initialVendor) and not essential in another (prefechVendor). The problem that webpack JS files are blocking the screen to paint first, it loads just after every JS finishes even the not necessary one. When I test on Chrome developer tab the "JS Coverage" it shows that "prefetchVendor" is 99.9% not used and initialVendor is like 80% used (covered). But when I block the loading of prefetchVendor it doesn't render the page.

My webpack.production.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,

My Routes.jsx

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

and then the components that includes the libs

I believe this 0.01% of usage on coverage (chrome shows me) is a code webpack inserted on chunk. How can I define the webpack config to load "prefetchVendor" after the others and asynchronously?