Estoy usando webpack splitChunks para dividir en código mi aplicación reactjs. Hay dos componentes <MassCommEmail /> y <MassCommModule /> que se cargan de forma diferida mediante React.lazy. A continuación se muestra mi compilación de webpack

 913.38 KB build/static/js/node_vendors.467b93e234af6637e68e.chunk.js 788.51 KB build/static/js/companyLib.61ddcc69fafdd1546c97.chunk.js 335.56 KB build/static/js/ant_design.77ed6d30af883eff2dd2.chunk.js 215.27 KB build/static/js/antd.1b8cb08f3015181b7f3c.chunk.js 33.88 KB build/static/js/MassCommEmail.3c8ea5b3dc06a55fdaf0.chunk.js 16.12 KB build/static/js/main.b523a0a7c1fbfb9bf35f.chunk.js 14.88 KB build/static/js/MassCommModule.dc76353c4ec12223ba55.chunk.js 5.39 KB build/static/js/utlis.c8bc64214a074a3c3d86.chunk.js 1.17 KB build/static/js/runtime~main.32b95a20a03cecf2c513.js

Al analizar más a fondo el fragmento con el analizador de paquete web, pude ver que hay un Filter utilizado por este informe de ambos fragmentos. Mi expectativa es tener un fragmento separado para los archivos compartidos, algo así como MassCommEmial ~ MassCommModule. [hash] .js que contiene el código compartido de ambos componentes. A continuación se muestra mi código splitChunks

 splitChunks: { chunks: 'all', maxInitialRequests: Infinity, // docs suggests not to make more than 30 chunk request instead prefer the non-chunk way for better performance. minSize: 0, cacheGroups: { utlis: { name: "utlis", test: /[\\/]app[\\/]utils[\\/]/, chunks: 'all', }, ant_design: { name: "ant_design", test: /[\\/]node_modules[\\/]@ant-design[\\/]/, chunks: 'all', priority: 1, }, antd: { name: "antd", test: /[\\/]node_modules[\\/]antd[\\/]/, chunks: 'all', priority: 1, }, companyLib: { name: "companyLib", test: /[\\/]node_modules[\\/]@companyLib[\\/]/, chunks: 'all', priority: 1, }, vendor: { name: "node_vendors", test: /[\\/]node_modules[\\/]/, chunks: 'all', }, }, }

Amablemente sugiera consejos.