I am working in legacy project whose is multi page application. We have multiple react apps localized in many different location returned by php routes, also we have multiple jQuery, pure js, and another libs modules (After all years app had many different frontend leaders whose add some libs and framworks). For bundling we currently using webpack 4, but in the near future i intend to update it. In project we have one package.json whose have all dependencies for all ours modules. Project structure look like this:

Module1
  dist/
  src/
    index.js
    ...another files.
Module2
  dist/
  src/
    index.js
    ...another files.

node_modules/
package.json
webpack.config.js

webpack config file have multiple config files, and we are merging it with webpackmerge and returning arrays

module.exports = ({ mode, app }) => {
  switch (app) {
    case 'commonJs':
      return [
        anotherLibs(mode),
        webpackMerge(commonJs, commonJsStyles(mode)),
      ];
    case 'react':
      return [
        webpackMerge(reactApp, commonReactConfig(mode)),
        webpackMerge(reactApp2, commonReactConfig(mode)),
        webpackMerge(reactApp3, reactTypescriptConfig(mode)),
      ];
    default:
      return;
  }
};

And here is the problem, all of this returned dist files are big. I want to optimize it and remove unused dependencies. Can You advice me how I can handle this in the best way ? We want to create fastest builds and optimize app performance.