Estaba pensando en optimizar la aplicación ReactJS + Wepback desde la perspectiva del rendimiento y encontré algunos consejos útiles sobre cómo reducir el código JS en el paquete final. Mi objetivo es, tal vez, ajustar los fragmentos para que el límite máximo sea de aproximadamente 100 kb o cerca de eso (si es posible en general). De hecho, encontré algunos consejos sobre Stackoverflow, aunque esas respuestas aún me llevan al enorme tamaño final del paquete.

¿Alguien sabe de algunos recursos que puedo buscar directamente para mejorar los proveedores y la carga de código personalizado, o podría ayudarme a mejorar el código de optimización?

 optimization: { splitChunks: { chunks: 'async', minSize: 20000, minRemainingSize: 0, minChunks: 3, maxAsyncRequests: 30, maxInitialRequests: 30, enforceSizeThreshold: 50000, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { const packageName = module.context .match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]; return `npm.${packageName.replace('@', '')}`; } }, styles: { name: 'styles', test: /\.css$/, chunks: 'all', enforce: true }, react: { test: /[\\/]node_modules[\\/](react)[\\/]/, name: 'react', chunks: 'all' }, react_dom: { test: /[\\/]node_modules[\\/](react-dom)[\\/]/, name: 'react-dom', chunks: 'all' }, bootstrap: { test: /[\\/]node_modules[\\/](bootstrap)[\\/]/, name: 'bootstrap', chunks: 'all' }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } } },