2

我正在使用 webpack splitChunks 代码拆分我的 reactjs 应用程序。有两个组件<MassCommEmail />，<MassCommModule />它们是使用 React.lazy 惰性加载的。下面是我从 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

在使用 webpack 分析器进一步分析块时，我可以看到Filter 这两个块都使用了报告 我的期望是为共享文件有一个单独的块，例如 MassCommEmial~MassCommModule.[hash].js，它包含来自两个组件的共享代码。下面是我的 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',
        },
      },
    }

请提出建议。

4

0 回答 0