优化React应用bundle体积时razzle配置出现npm start报错求方案

• 存在硬编码语法错误
  配置中config.plugins(new webpack.DefinePlugin(...))写法完全错误：config.plugins是webpack维护的插件数组，本身不是可执行函数，这种调用方式会直接抛出类型错误，导致编译流程中断，停在输出“等待编译中”的初始状态，没有后续报错输出。
• 环境判断逻辑完全缺失
  当前插件加载的判断条件仅校验了web端打包目标，没有区分开发启动（执行npm start）和生产构建的场景，直接把生产环境才需要的代码压缩、丑化插件放到开发启动流程里。开发模式本身追求热更新编译速度，强制走全量压缩逻辑会直接堵死编译流程。
• 引入了和当前框架版本不兼容的废弃API
  Razzle 4.0.4版本对应webpack5内核，配置里用到的多个插件都是webpack3/4时代的废弃能力：
  • webpack.optimize.UglifyJsPlugin 早已被webpack移除，内置的TerserPlugin已经替代其JS压缩功能，引入即会触发初始化报错
  • webpack.optimize.AggressiveMergingPlugin 功能早已被webpack内置的模块合并能力覆盖，手动引入会直接失败
  • CompressionPlugin的配置还是旧版参数格式，webpack5版本要求用filename字段替代旧版的asset字段，参数不匹配会导致插件加载异常
• 缺失必要的依赖导入
  配置里用到的path、webpack、LoadableWebpackPlugin、CompressionPlugin都没有在文件开头做导入声明，执行到对应逻辑时会抛出变量未定义的错误，卡死编译流程。

• 先修正配置的基础逻辑
  把错误的插件调用写法改成数组push，补充所有必要的依赖导入，新增环境判断条件：只有当生产构建（opts.env.dev === false）时才加载生产优化类插件，开发启动时完全跳过这些插件，从根源上解决编译卡顿问题。
• 复用框架内置的优化能力
  去掉手动引入的JS丑化、模块合并类插件，Razzle生产构建默认已经开启了Tree Shaking、JS代码压缩、模块作用域合并能力，重复配置不仅不会减小体积，还会拖慢编译速度。
• 落地分层代码分割策略
  把react、react-dom等长期稳定的第三方依赖单独拆分出独立chunk，配合浏览器的长期缓存能力减少重复加载；结合已经引入的LoadableWebpackPlugin做路由级别的组件按需加载，把非首屏的组件拆成独立chunk，避免首屏bundle承载全部代码。
• 合理配置资源压缩能力
  适配webpack5版本的CompressionPlugin参数规则，对超过10kb的静态资源开启gzip压缩，降低网络传输体积；固定postcss版本为v8.2.4，避免CSS处理流程的版本冲突导致的打包异常。
• 排查冗余依赖占用
  利用webpack的打包统计能力定位bundle内的大体积模块，比如重复引入的工具库、全量导入的日期处理库等，替换成按需引入的写法或者轻量替代方案，剔除非必要的第三方依赖。

内容的提问来源于stack exchange，提问作者Mhmd Backer Shehadi