Angular项目主包异常包含iconv-lite依赖,如何排查其引入来源
结论
Angular官方核心框架(@angular/core、@angular/common等官方维护包)本身不会引入iconv-lite依赖,该依赖出现在生产包属于异常情况,可按以下方向排查:
排查方向
- 检查依赖安装类型
执行yarn why iconv-lite --production命令,该命令会过滤开发依赖(devDependencies)的引用,仅展示生产依赖(dependencies)的依赖链。如果执行后有结果,说明你误将jest、less这类本应放在devDependencies的工具安装到了生产依赖中,将对应包移到devDependencies后重新构建即可。 - 检查Node polyfill配置
iconv-lite是Node.js环境专属的字符编码处理库,正常不会被前端打包工具识别引入。检查你的Angular配置:打开angular.json,找到对应项目的projects.项目名.architect.build.options.polyfills配置项,看是否额外添加了Node内置模块的polyfill;如果使用了自定义webpack配置,检查是否配置了Node模块polyfill规则,这类规则会自动把Node专属依赖打包到前端产物中。 - 检查业务代码与自定义配置
全局搜索项目内所有代码,排查是否有import 'iconv-lite'或require('iconv-lite')的引用,部分处理文件导出、字符转码的逻辑可能误引入了该Node端库。如果用了@angular-builders/custom-webpack这类自定义构建工具,检查webpack配置中是否有错误的alias、externals规则,导致打包工具错误引入了该依赖。 - 快速验证方案
你可以在package.json中添加resolutions字段强制替换该依赖为空包,验证打包后体积是否恢复正常,同时排查是否有功能受影响:
配置后执行"resolutions": { "iconv-lite": "npm:empty-npm-package@1.0.0" }yarn install重新安装依赖,再构建查看主包体积即可。
包体积分析参考

内容的提问来源于stack exchange,提问作者petur
相关产品推荐
相关产品推荐

