在app.module.ts文件中确定未使用的Angular模块

Question

我继承了一个角度应用，可以在阳光下导入所有东西，导致vendor.bundle.js为8mb。

是否有实用工具让我知道哪些模块未使用，可以安全删除？

或者AOT是否照顾到了这一点？

另外，如果没有与之相关的导入，是否需要删除node_modules文件夹？或者是否将它留在那里并不会有害因因为AOT不会接受它？

Answer 1

据我所知，AOT只删除未使用或导入NgModule的代码。并且未在任何地方导入的代码（包括node_modules）都不会包含在捆绑包中。您可以通过多种方式找到未使用过的代码。

配置TypeScript以抱怨未使用的导入

使用--noUnusedLocals compiler option将导致未使用的导入和局部变量抛出打字稿错误。其中大部分应该已经由AOT处理，但您有可能找到AOT认为可能需要的未使用的导入。

探索捆绑

探索捆绑包有助于查看哪些文件占用的最大值。它不会向您显示哪些依赖项触发了它们的导入，但它会帮助您确定优先级。

1. 将--sourcemaps和--stats-json标记添加到ng build。
2. 使用webpack-bundle-analyzer阅读dist/stats.json文件以查看捆绑包中的内容
3. 要探索在prod构建期间组合的模块，请使用`source-map-explorer'

试用和错误

虽然这是寻找未使用代码的最不自动化的方式，但默认情况下，Angular编译器可以很好地检查以确保在运行应用程序之前捆绑包中包含所需的组件。因此，如果您已对文件进行了搜索并且未考虑使用某个模块，请尝试删除导入，然后查看CLI是否会引发编译错误。