vue-cil 打包大坑之 TerserPlugin 压缩配置

最新推荐文章于 2024-02-06 16:42:37 发布

九州仝

最新推荐文章于 2024-02-06 16:42:37 发布

阅读量513

点赞数 6

文章标签： vue.js 前端 javascript vue

本文链接：https://blog.csdn.net/weixin_50182204/article/details/136022917

版权

生产打包后报错

在 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

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

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

关注