React应用构建文件夹体积达107MB，如何优化？已使用Code Splitting

嗨，我来帮你搞定构建文件夹体积过大的问题！你已经用上Code Splitting（通过react-loadable）来拆分bundle，但还是遇到了chunk文件过多、source map占空间的情况，总大小到了107MB对吧？咱们从几个方向入手优化：

那些[name].chunk.js.map文件是用来调试代码的，生产环境如果不需要调试的话，完全可以砍掉，这能省出不少空间：

• 直接关闭生产环境Source Map：如果是Create React App项目，在根目录的.env.production里添加GENERATE_SOURCEMAP=false；如果是自定义webpack配置，把devtool设置为false就行。
• 保留调试但减小体积：如果必须保留调试能力，可以换用更轻量的Source Map类型，比如cheap-module-source-map或者hidden-source-map，它们生成的文件比默认的source-map小很多，而且不会直接暴露给浏览器。

你用了react-loadable做拆分，但可能存在拆分过细或者重复打包的情况：

• 合并细碎Chunk：在webpack的splitChunks配置里，设置minSize阈值（比如minSize: 20000，即20KB），小于这个大小的chunk会被合并，避免生成一堆小文件。示例配置：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000, // 只拆分大于20KB的chunk
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
    }
  }
}

• 合理规划按需加载：检查你的路由拆分逻辑，是不是有些极小的页面没必要单独拆分？比如几个功能相近的小页面可以合并成一个chunk，减少总数量。
• 排查重复依赖：用工具分析bundle，看看有没有重复引入的第三方库（比如不同组件里都加载了lodash的不同部分），这时候可以把公共依赖抽成单独的vendor chunk，或者用ES模块版本的库配合tree shaking。

生产环境的代码压缩是基础，但很多时候可以配置得更极致：

• JS压缩：webpack5自带terser-webpack-plugin，生产环境默认开启，但可以添加额外配置去掉冗余代码：

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 去掉所有console.log
            drop_debugger: true, // 去掉debugger语句
            pure_funcs: ['console.log'] // 指定要移除的函数
          },
          mangle: true, // 混淆变量名
          keep_classnames: false,
          keep_fnames: false
        }
      })
    ]
  }
}

• CSS压缩：如果用了mini-css-extract-plugin提取CSS，配合css-minimizer-webpack-plugin压缩样式，去掉冗余的选择器、注释和空格。

确保你的项目配置能让webpack自动移除未使用的代码：

• 坚持用ES模块语法：所有导入导出都用import/export，不要用CommonJS的require，因为Tree Shaking只对ES模块生效。
• 在package.json里声明sideEffects：告诉webpack哪些文件没有副作用（比如样式文件有副作用，不能随便移除），示例：

{
  "sideEffects": ["*.css", "*.scss"]
}

如果你的项目里没有需要保留副作用的文件，可以直接设为"sideEffects": false，让webpack更彻底地清理无用代码。

第三方库通常是bundle体积的主要贡献者，针对性优化能省很多空间：

• 替换成更轻量的库：比如用date-fns替代moment.js（体积只有moment的1/10），用lodash-es代替完整的lodash，并且只引入需要的部分（比如import debounce from 'lodash-es/debounce'，而不是import _ from 'lodash'）。
• 组件库按需加载：如果你用了AntD、ElementUI这类大型组件库，不要全量引入，用对应的按需加载插件，比如AntD的babel-plugin-import，只打包你用到的组件和样式。
• 用CDN加载公共库：把react、react-dom这类常用库放到CDN上，在webpack里配置externals，不让它们打包到你的chunk里：

module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
}

然后在HTML里引入CDN的脚本即可。

静态资源尤其是图片，也是体积大户：

• 图片压缩：用image-webpack-loader对JPG、PNG、SVG等图片进行压缩，能显著减小体积。示例webpack配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                quality: 80, // JPG质量设为80%
                progressive: true
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.6, 0.8]
              },
              gifsicle: {
                interlaced: false,
              }
            }
          }
        ]
      }
    ]
  }
}

• 用WebP格式：WebP比传统图片格式小30%左右，webpack可以配置自动转换图片为WebP，同时兼容不支持的浏览器。
• 小图片转Base64：把小于8KB的图片转成Base64嵌入到代码里，减少HTTP请求的同时也能节省一点体积。

最后，一定要用可视化工具分析你的bundle，才能找到最该优化的点：

• webpack-bundle-analyzer：它会生成一个交互式的图表，展示每个chunk的大小和依赖关系，你能清楚看到哪些库或者组件占了大头。安装后在webpack配置里启用即可：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

• 如果是Create React App项目，直接运行npm run build -- --stats生成stats文件，然后用webpack官方的分析工具查看即可。

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