vendors bundles in react js - reactjs

Question

I distributed the bundle using lazy load, the size of the reactApp.bundle decreased significantly, and indeed improved the loading of the application.
In the bundles folder, I have created bundle files whose name expresses the routing to the component that the bundle file records for the sample:
The file: src_pages_employees_index_js.bundle.js
Records the contents of the file:
src>pages>employees>index_js
The src, this is the folder where the reactApp.js file is located and it is documented as a starting point in module.exports in the -webpack.config.js file
so:
module.exports = { entry: { reactApp: path.resolve(__dirname, "./src/reactApp.js"), },
Inside the bundles folder, I have additional files that start with vendors, for example:
vendors-node_modules_material-table_exporters_index_js-node_modules_material-ui_core_esm_Box_-54c6ff.bundle
The bundle files that start with vendors also continue and gain weight as development progresses, I'm trying to understand what their source is in order to handle their splitting, we don't have a folder called vendors in the project, the only mention I found is a json file located inside the node_modules in the following path:
node_modules>ci-info>vendors.json
There doesn't seem to be a connection, but it makes sense, I couldn't understand the connection, and how do I locate the reasons for recording the content in these files in order to handle their splitting,
I am trying to find what are the files documented in the bundle files starting with vendors

Answer 1

The files that start with the 'vendor' are bundle files that are created as a result of importing external packages, such as material and the like,
To improve the loading time for these components, you can use the lazy loader
for example:
import React, { lazy, Suspense } from "react";
import { makeStyles } from "#material-ui/core/styles";
const Tabs = lazy(() => import("#material-ui/core/Tabs"));
const Tab = lazy(() => import("#material-ui/core/Tab"));
const Box = lazy(() => import("#material-ui/core/Box"));
When using components imported via lazy they must be wrapped in suspense
for example:
function App() {
const classes = makeStyles({
root: {
flexGrow: 1,
backgroundColor: "#fff",
},
})();
return (
<div className={classes.root}>
<Suspense fallback={<div>Loading Material-UI components...</div>}>
<Tabs value={0} aria-label="simple tabs example">
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
<Box>Some content here</Box>
</Suspense>
</div>
);
}
export default App;