在 app.module.ts 文件中确定未使用的 Angular 模块 [英] determining the unused Angular modules at the app.module.ts file

问题描述

我继承了一个 angular 应用程序，该应用程序在阳光下导入所有内容，导致 vendor.bundle.js 为 8mb.

I've inherited an angular app that imports everything under the sun causing the vendor.bundle.js to be 8mb.

是否有实用程序可以让我知道哪些模块没有被使用，并且可以安全地移除?

Is there a utility to let me know which modules are not in use, and can safely be removed?

或者 AOT 会负责吗?

Or does the AOT takes care of that?

另外，如果没有与之相关的导入，我是否需要删除 node_modules 文件夹?还是因为 AOT 无论如何都不会接受它，所以将它留在那里不会有什么坏处?

Also, do I need to remove the node_modules folder if there is no import related to it? Or is it that it would not hurt to leave it there cause AOT won't take it anyway?

推荐答案

据我所知，AOT 只会删除未使用或未导入到 NgModule 中的代码.未在任何地方导入的代码(包括 node_modules)不会包含在包中.您可以通过多种方式找到未使用的代码.

As far as I know, AOT only removes code that isn't used or imported into an NgModule. And code that isn't imported anywhere (including node_modules) won't be included in the bundle. There are a few ways you can find code that isn't used.

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

Using the --noUnusedLocals compiler option will cause unused imports and local variables to throw a typescript error. Most of these should already be handled by AOT but there is a chance that you'll find an unused import that AOT thought might be necessary.

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

Exploring the bundle is helpful to see what files take up the most size. It won't show you what dependencies triggered their import but it will help you prioritize.

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

1. Add the --sourceMap and --statsJson flags to your ng build.
2. Use webpack-bundle-analyzer to read the dist/stats.json file to see what is in your bundle
3. To explore the modules that were combined during the prod build, use the `source-map-explorer'

试错

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

Trial and Error

While this is the least automated way of looking for unused code, the Angular compiler by default does a good job of checking to ensure that needed components are included in the bundle before you run your application. Therefore if you've done a search of your files and don't think a module is used, try removing the import and see if the CLI throws a compilation error.

这篇关于在 app.module.ts 文件中确定未使用的 Angular 模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！