如何排查Vue-CLI生产构建时Terser抛出的chunk-vendors undefined错误

常见报错样例 #

⠏  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                       21:21:03

 error  

js/chunk-vendors.fd39f4a0.js from Terser
undefined

 ERROR  Build failed with errors.

具体排查步骤 #

• 第一步：获取完整报错栈信息
  修改构建命令开启terser插件调试日志：先安装cross-env做跨平台环境变量兼容，再把package.json中的build命令调整为：
  cross-env DEBUG=terser-webpack-plugin vue-cli-service build
  重新执行构建就能看到Terser触发崩溃的具体阶段、正在处理的文件信息，不会仅显示undefined的空报错。
• 第二步：精准定位问题模块
  已经初步锁定关联模块的前提下，可以直接用本地Terser单独压缩该模块验证问题：
  npx terser ./node_modules/mapbox-gl-draw-circle/dist/index.js --compress --mangle
  如果执行后也触发报错，就能100%确认是该模块的语法特性和当前Terser版本不兼容导致的构建崩溃。
• 第三步：针对性修复，无需全局禁用Terser
  可按优先级从高到低选择修复方案：
  • 仅跳过单个问题模块的压缩：在vue.config.js中配置terser插件的exclude规则，只排除有问题的第三方模块，对整体构建体积的影响可以忽略：

    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        config.optimization.minimizer('terser').tap(args => {
          args[0].exclude = /node_modules\/mapbox-gl-draw-circle/
          return args
        })
      }
    }
    

  • 升级Terser相关依赖的小版本：当前使用的terser-webpack-plugin 1.2.1、terser 3.14.1都属于对应大版本内的旧版本，可以升级到同大版本的最新兼容版：terser-webpack-plugin@1.4.5、terser@3.17.0，小版本升级不会引入破坏性变更，基本可以兼容原有项目配置，同时修复部分新语法的支持问题。
  • 给第三方模块打补丁：如果确认是mapbox-gl-draw-circle本身存在语法错误，可以用patch-package工具给本地安装的依赖打补丁，无需修改业务代码也不用改动构建配置。
• 第四步：功能验证
  构建成功后，本地启动静态服务访问构建后的产物，确认相关业务功能运行正常即可。

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