Webpack打包存在重复模块导致bundle体积过大问题咨询

1. 调整Webpack代码分割配置 #

你当前的核心问题是公共依赖没有被提取到独立公共chunk，导致每个业务bundle都重复打包了react-pdf、material-ui这类重型依赖，修改webpack的splitChunks配置即可解决：

// webpack.config.js的optimization配置段调整如下
module.exports = {
  // 其余原有配置保持不变
  optimization: {
    splitChunks: {
      chunks: 'all', // 同步、异步chunk都执行拆包逻辑
      cacheGroups: {
        // 提取所有node_modules下的公共依赖到单独的vendors包
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: -10,
          reuseExistingChunk: true,
        },
        // 单独拆分react-pdf这类超大依赖，避免影响其他公共包缓存
        reactPdf: {
          test: /[\\/]node_modules[\\/]@react-pdf[\\/]/,
          name: 'react-pdf',
          priority: 0,
          reuseExistingChunk: true,
        },
        // 单独拆分material-ui相关依赖
        mui: {
          test: /[\\/]node_modules[\\/]@mui[\\/]/,
          name: 'material-ui',
          priority: 0,
          reuseExistingChunk: true,
        }
      }
    }
  }
}

2. 优化material-ui引入逻辑 #

• 避免全量导入material-ui的写法，比如import * as MUI from '@mui/material'，改为按需命名导入import { Button, TextField } from '@mui/material'，开启tree shaking后会自动剔除未使用的组件
• 如果使用的是material-ui v4及更早版本，可以安装babel-plugin-import配置按需引入，进一步压缩体积

3. 优化react-pdf打包逻辑 #

• react-pdf默认会将pdf.worker.js打包进bundle，可将worker外置为静态资源或CDN资源，减少bundle体积：

import { pdfjs } from 'react-pdf';
// 直接用CDN加载worker，不打包进业务代码
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

• 如果仅需要生成pdf不需要渲染解析功能，可仅引入@react-pdf/renderer的核心模块，剔除冗余功能

4. 验证优化效果 #

修改配置后重新执行打包，通过webpack-bundle-analyzer或source-map-explorer检查依赖分布，确认react-pdf、material-ui仅被打包一次，正常优化后单个业务bundle体积可降低90%左右。

内容的提问来源于stack exchange，提问作者Adam Farmer