Estoy trabajando en un proyecto heredado cuya aplicación es de varias páginas. Tenemos múltiples aplicaciones de reacción localizadas en muchas ubicaciones diferentes devueltas por rutas php, también tenemos múltiples jQuery, js puro y otros módulos libs (después de todos los años, la aplicación tenía muchos líderes frontend diferentes que agregaban algunas libs y framworks). Para la agrupación, actualmente usamos el paquete web 4, pero en un futuro cercano tengo la intención de actualizarlo. En el proyecto tenemos un paquete.json que tiene todas las dependencias para todos nuestros módulos. La estructura del proyecto se ve así:

 Module1 dist/ src/ index.js ...another files. Module2 dist/ src/ index.js ...another files. node_modules/ package.json webpack.config.js

El archivo de configuración del paquete web tiene varios archivos de configuración, y lo estamos fusionando con webpackmerge y devolviendo matrices

 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; } };

Y aquí está el problema, todos estos archivos dist devueltos son grandes. Quiero optimizarlo y eliminar las dependencias no utilizadas. ¿Me puede aconsejar cómo puedo manejar esto de la mejor manera? Queremos crear compilaciones más rápidas y optimizar el rendimiento de la aplicación.