vue-cil 打包大坑 之 TerserPlugin 压缩配置_vue 压缩后 super expression

生产打包后报错

问题

在 Vue CLI 中，当打包时设置 NODE_ENV 为 ‘production’ 和 ‘test’ 时，打包后测试包（test）正常，生产包（production）不正常

报错情况

内容：

Uncaught TypeError: Object(...) is not a function
/XXXXX/static/js/chunk-vendors.282dcf5f.js:9:45922
TypeError: Object(...) is not a function
1
2
3

解析：
chunk-vendors.xxx(随机hash值).js，文件中的某一行报错，实际该文件为 node_modules 文件夹下的文件压缩包。

分析过程

1. 首先需要排除是不是vue相关的扩展版本不一致问题，本次因为 ‘test’ 打包正常，因此可以排除版本问题
2. 在 Vue CLI 中，当打包时设置 NODE_ENV 为 ‘production’ 和 ‘test’，对于Webpack 配置会有优化：当 NODE_ENV 设置为 ‘production’ 时，Vue CLI 会生成高度优化过的生产环境构建。这意味着代码会被压缩、混淆、删除无效的警告和调试语句等，以减少文件大小、提高加载速度和增强安全性。
   而设置为 ‘test’ 时，Vue CLI 可能会生成更适合于测试环境的构建，不会进行过度优化，甚至根据配置可能不会压缩代码，方便进行单元测试、覆盖率分析和其他形式的自动化测试。
3. 因此问题大概率时压缩代码导致的
4. 检查发现在 vue.config.js 文件 配置了使用 TerserPlugin 进行代码压缩，禁用打包发现问题解决了，而且打包后的代码也是被压缩处理的
5. 查阅了一圈资料后发现：Vue CLI 4.x 及更高版本中，确实已经预设了一套默认的生产环境构建优化方案，如果在 Vue CLI 的配置文件（ vue.config.js）中再次手动配置 TerserPlugin，可能会覆盖或修改 Vue CLI 内置的默认压缩选项。若配置得当，则可以针对特定需求进一步定制化压缩行为；若配置不当，则可能会影响到最终构建产物的质量，比如压缩程度不足或过度压缩影响调试等。