determining the unused Angular modules at the app.module.ts file

Question

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?

Or does the AOT takes care of that?

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?

Answer 1

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.

Configure TypeScript to complain about unused imports

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

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. 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'

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.