Angular项目打包体积无法减小，寻求技术协助

• 清理各类缓存

  • 执行ng cache clean清空Angular CLI缓存，或者手动删除项目根目录下的.angular/cache文件夹
  • 删除node_modules目录和package-lock.json/yarn.lock文件，重新执行npm install或yarn install，确保依赖完全更新
  • 如果是在浏览器中查看打包文件，按Ctrl+F5强制刷新，或者在开发者工具中禁用缓存后重新加载页面

• 确认生产环境构建配置

  • 必须使用生产环境命令构建：ng build --prod 或 ng build --configuration production，开发环境构建默认不会启用Tree Shaking、代码压缩等关键优化
  • 检查angular.json中的生产配置项，确保以下参数为true：

    "configurations": {
      "production": {
        "optimization": true,
        "buildOptimizer": true,
        "treeShaking": true
      }
    }
    

• 验证按需导入的有效性

  • 确认按需导入的写法正确，比如uuid要写import { v4 as uuidv4 } from 'uuid';，而非全量导入import * as uuid from 'uuid';
  • 检查依赖库是否支持Tree Shaking：部分库的导出方式（比如使用CommonJS模块）会导致Tree Shaking失效，可以查看库的文档确认是否支持ES模块导出

• 正确使用打包分析工具

  • 确保分析的是生产构建后的产物，而非开发环境打包文件
  • 重新生成source map和stats文件后再分析：
    1. 执行ng build --prod --source-map --stats-json生成带source map和统计信息的生产包
    2. 用source-map-explorer dist/**/*.js或webpack-bundle-analyzer dist/stats.json重新分析

• 排查隐藏的间接依赖

  • 用npm ls 依赖名（如npm ls moment）或yarn why 依赖名检查是否有第三方库间接引入了你以为已移除的依赖
  • 再次核对package.json的dependencies和devDependencies，确认已移除的库不在列表中

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