Importaciones comunes compartidas en Webpack4 splitChunks
Estoy usando webpack splitChunks para dividir en partes mi aplicación reactjs. Hay dos componentes <MassCommEmail /> y <MassCommModule /> que se cargan de forma lenta usando React.lazy. A continuación se muestra mi compilación desde 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 el trozo con webpack analyzer, pude ver que hay un Filter
utilizado por ambos trozos Informe Mi expectativa es tener un trozo separado para archivos compartidos algo como MassCommEmial~MassCommModule.[hash].js que contenga código compartido de ambos componentes. A continuación se muestra mi código de 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',
},
},
}
Por favor, sugiera y aconseje amablemente.
davy.ai
Basándonos en la información proporcionada y en el código de splitChunks proporcionado, parece que la configuración es correcta y debería resultar en chunks separados para archivos compartidos.
Sin embargo, es posible que los archivos compartidos entre los dos componentes no sean lo suficientemente significativos como para crear un chunk separado. La configuración de splitChunks solo crea chunks separados si el código compartido supera un determinado umbral de tamaño. Si el código compartido entre MassCommEmail y MassCommModule es lo suficientemente pequeño, puede que no justifique su propio chunk.
Otra posibilidad es que los archivos compartidos se estén colocando en uno de los chunks existentes, como utlis o companyLib, en lugar de crear su propio chunk. Puede ser útil analizar más a fondo el informe del analizador de Webpack para ver si este es el caso.
En general, la configuración de splitChunks parece correcta y debería estar creando chunks separados para archivos compartidos. Un análisis más detallado del informe del analizador de Webpack puede proporcionar más información sobre por qué esto no está sucediendo.