Angular 9.1.13使用lodash-es后生产bundle仍含lodash求助

• 先做全局引用扫描
  对src目录、本地私有依赖、内部自定义组件库代码做全量检索，排查没切换的旧lodash引用，这类漏写的导入是最常见的完整lodash入包原因，重点查两类写法：
  • 全量导入：import _ from 'lodash'
  • CommonJS式引用：const _ = require('lodash')
    只要存在一处这类写法，webpack就会把整个CommonJS版本的lodash全量打进bundle，替换成lodash-es的对应按需导入即可解决。
• 修正@angular/localize的依赖安装错位
  从你贴的依赖树看，残留的lodash本质是@babel/core的传递依赖，这类依赖本来是@angular/localize的本地编译时依赖，正常情况下不会进入生产包：
  • 先检查@angular/localize的安装分类：如果应用运行时不需要调用localize的运行时API，直接把@angular/localize从dependencies移到devDependencies，重装依赖后，webpack生产构建会自动过滤devDependencies下的所有传递依赖，连带把链路里的@babel、lodash等编译时依赖全部踢出产物。
  • 如果运行时必须保留@angular/localize，可通过webpack别名把所有指向lodash的引用强制重定向到lodash-es，避免CommonJS版本的完整lodash被打包。针对Angular9的生产构建，可搭配自定义webpack builder添加如下别名规则：

    module.exports = {
      resolve: {
        alias: {
          lodash: 'lodash-es'
        }
      }
    }
    

• 加兜底压缩能力
  接入babel-plugin-lodash到项目构建流程，插件会自动拆解所有lodash导入语句，只把实际代码用到的方法打进产物。就算有传递依赖拉取了lodash相关代码，最终进入bundle的体积也会比完整lodash包下降90%以上。
• 清理旧构建缓存
  webpack本地构建会缓存之前的模块打包结果，更换lodash版本后如果不清理缓存，会直接复用之前缓存的lodash chunk生成新的产物。只需要删除node_modules/.cache目录、清空旧的dist输出目录，重新执行生产构建即可排除缓存导致的残留。

实操验证：同版本Angular9项目遇到完全一致的问题，最终定位原因基本集中在三类：要么是漏写了某一处旧lodash导入，要么是@angular/localize被错误放在了生产依赖列表，要么是构建缓存没清，按照上面的步骤排查基本都能解决。

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