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

Question

我继承了一个有角度的应用程序，该应用程序可以在阳光下导入所有内容，从而使vendor.bundle.js为8mb。

是否有实用程序让我知道哪些模块未使用并且可以安全地删除？

还是由AOT负责？

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

Answer 1

据我所知，AOT 只会删除未使用或未导入到NgModule. 未在任何地方导入的代码（包括 node_modules）不会包含在包中。有几种方法可以找到未使用的代码。

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

使用--noUnusedLocals 编译器选项将导致未使用的导入和局部变量引发打字稿错误。其中大部分应该已经由 AOT 处理，但您可能会发现 AOT 认为可能需要的未使用导入。

探索捆绑

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

1. 将--sourceMap和--statsJson标志添加到您的ng build.
2. 使用webpack-bundle-analyzer阅读dist/stats.json文件，看看有什么是你的包
3. 要探索在 prod 构建期间组合的模块，请使用“source-map-explorer”

试错

虽然这是查找未使用代码的自动化程度最低的方法，但默认情况下，Angular 编译器会很好地检查以确保在运行应用程序之前将所需的组件包含在包中。因此，如果您搜索了文件并且认为没有使用模块，请尝试删除导入并查看 CLI 是否引发编译错误。