Brian Ogden
Brian Ogden

Reputation: 19212

Value in Cleaning up unneeded import statements Typescript/Angular

Visual Code nicely displays unused imports: enter image description here

Would having a junior developer/intern go through and remove all unused imports and a relatively decent sized Angular 7 have any benefit other than code tidiness?

Is it possible app size/performance could be improved?

Upvotes: 1

Views: 3211

Answers (2)

Lin Du
Lin Du

Reputation: 102317

Here are two solutions to different phases:

  1. At code writing phase

You can use the code editor feature to remove the unused import variables. e.g. vscode provide a feature run-code-actions-on-save

Add below config in your settings.json file of vscode:

{
  "[typescript]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  }
}

It will remove the unused import variables and organize your import statement.

  1. At compiler phase

Like @mwilson said, tsc, aot compilation or webpack and do this kind of job.

Upvotes: 3

mwilson
mwilson

Reputation: 12910

It's really up to you and what you prefer. If you leave them in there and are using angular AOT compilation, Tree Shaking is done. You can read more about that process here (https://angular.io/guide/aot-compiler)

One other option (to prevent people from doing this) is to enable the no-unused-variable in your tslint.json. This enables your TypeScript Linter to disallow unused imports:

Disallows unused imports, variables, functions and private class members. Similar to tsc’s –noUnusedParameters and –noUnusedLocals options, but does not interrupt code compilation.

https://palantir.github.io/tslint/rules/no-unused-variable/

I personally would just enable the tslint rule, run the linter, figure out how many references are unused and then determine if it's worth having someone go through all those lint errors and fix them.

Upvotes: 4

Related Questions