2

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.

Ramji
  • 53
  • 2
  • 8

0 Answers0