ng build --prod后dist目录冗余国旗SVG文件的排查与排除方案

产生大量SVG国旗文件的原因 #

• 第三方依赖默认引入全套国旗资源：部分国际化、地址选择或支付类组件库（如带国旗选择的国家选择器），会默认将所有国家的SVG国旗打包进产物，哪怕你只用到其中几个。
• 项目资源配置不当：angular.json的assets配置中，可能直接包含了存放国旗SVG的整个目录，构建时会将目录下所有文件复制到dist，不管是否被代码引用。
• 代码中全局导入国旗目录：如果项目自身有国旗资源目录，代码里不小心做了全局导入（比如import './flags/*'），会触发构建工具将所有相关SVG打包。

排除冗余文件的方法 #

1. 排查并优化第三方依赖
   • 查看package.json中的依赖项，定位到带国旗功能的库，查看其官方文档，找到按需引入的配置项——比如只声明需要用到的国家代码，让库只打包对应国旗；如果该库不支持按需引入，考虑替换为支持tree-shaking的同类库。
2. 调整Angular构建的assets配置
   • 打开angular.json，找到architect.build.options.assets数组：
     • 如果不需要任何国旗文件，直接移除包含国旗目录的配置项；
     • 如果只需要部分国旗，将配置改为指定单个文件，例如：

       {"glob": "cn.svg", "input": "src/assets/flags", "output": "/assets/flags"}
       

     • 或者使用排除规则过滤不需要的文件（如果目录里还有其他需要保留的资源）：

       {"glob": "**/*", "input": "src/assets/flags", "output": "/assets/flags", "exclude": ["**/*.svg"]}
       

3. 优化代码中的资源导入
   • 检查项目代码，避免全局导入国旗目录，只在需要的组件中单独导入用到的SVG文件，例如：

     import flagCn from '../assets/flags/cn.svg';
     

   • 这样Angular的生产构建会通过tree-shaking自动忽略未被引用的SVG文件。
4. 确认tree-shaking开启
   • Angular的--prod模式默认开启tree-shaking，但如果某些库未遵循ES模块规范，可能无法被tree-shaking处理。此时可以尝试在tsconfig.json中开启"compilerOptions": {"module": "esnext"}，提升tree-shaking效果。

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