I'm using webpack splitChunks to code split my reactjs application. There are two components <MassCommEmail />
and <MassCommModule />
which are loaded lazy using React.lazy. Below is my build from 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
On further analyzing chunk using webpack analyzer i could see there is Filter
used by this both chunk Report
My expectation is to have a separate chunk for shared files something like MassCommEmial~MassCommModule.[hash].js which holds shared code from both components. Below is my splitChunks code
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',
},
},
}
Kindly suggest advice.