angular 中的 typescript lodash tree shaking 失败

Question

我有一些使用打字稿的大项目。

我尝试了几种 tree shake lodash 的方法。

我觉得还是先看看我的工作成果吧

我的构建命令是

构建命令

ng build --stats-json
webpack-bundle-analyzer {{stats.json path}}

custom_loadsh.ts

export { forEach } from 'lodash/forEach';
export { cloneDeep } from 'lodash/cloneDeep';
...
..
.

app.component.ts

import * as _ from './custom_lodash';
export class AppComponent implements OnInit {
   ...
   ngOnInit() {
       let data = {
          test: 1  
       };
       let data2 = _.cloneDeep(data);
   }
   ...
}

不是通过 custom_lodash 获取整个 lodash，而是只导入其中的一部分。

当然，上面的示例代码和实际项目有点出入，但是整体配置是一样的。

我想知道为什么 lodash tree shaking 失败了。

这是我引用的网站。 https://medium.com/@martin_hotell/tree-shake-lodash-with-webpack-jest-and-typescript-2734fa13b5cd

Answer 1

我找到问题所在了。

问题是 node_modules 中的另一个包。

在我的例子中，ngx-treeview 包使用 lodash。

这是 ngx-treeview

中的示例代码

import { isNil, isString } from 'lodash';

所以，我会在下面尝试。

import isNil from 'lodash/isString';
import isString from 'lodash/isNil';

但是..这个解决方案是临时的。

我会尝试将问题报告给 ngx-treeview github。不幸的是，上次编辑该包已超过 1 年。

所以，我只是 fork 那个分支。

angular 中的 typescript lodash tree shaking 失败

lodash tree shaking failed with typescript in angular

typescript

lodash

tree-shaking

angular