unused-import 제거를 통한 빌더 성능 개선

tsc는 컴파일시에 사용하지 않더라도 import 된 경로가 있다면 해당 경로의 타입에 문제가 있는지 없는지를 진단하는 과정을 거친다. (단 컴파일 결과에서는 제외됨)

 

사용하지 않는 import가 있고 만약 파일들이 많이 얽혀있다면 이로 인해 tsc 컴파일 시간이 증가할 가능성이 있다. 따라서 사용하지 않는 import 구문들을 제거한다면 tsc 컴파일 시간이 감소될것이라고 추측하였으며 이를 eslint를 사용하여 제거한 뒤 테스트를 진행해보기로 결정하였다.

 

import와 관련된 eslint plugin는 여러가지가 있지만 기존 eslint rule의 변경이 필요한건 아니며 순수하게 unused import와 관련된 작업만 필요하기에 이와 딱 맞는 eslint plugin을 설치찾아 설치해준다.

 

이 경우는 eslint-plugin-unused-imports 패키지를 사용하였다.

https://www.npmjs.com/package/eslint-plugin-unused-imports

eslint-plugin-unused-imports

 

현재 회사에서는 eslint 8.5.0, typescript-eslint/eslint-plugin: 5.8.1 버전을 사용하고 있다.

따라서 이 버전과 호환되는 버전으로 해당 패키지를 설치해주어야 한다.

docs를 보면 아래와 같이 명시되어 있다.

• Version 4.x.x is for eslint 9 with @typescript-eslint/eslint-plugin 8
• Version 3.x.x is for eslint 8 with @typescript-eslint/eslint-plugin 6 - 7
• Version 2.x.x is for eslint 8 with @typescript-eslint/eslint-plugin 5
• Version 1.x.x is for eslint 6 and 7.

Version 2.x.x가 호환되는 버전이니 해당 버전을 설치해야한다.

 

npm의 Verison 탭으로 이동해 확인해보니 2.0.0이 호환되는 버전중 가장 최신 버전인것을 확인할 수 있었다 이 버전으로 패키지를 설치해준다.

[명령어]

npm i eslint-plugin-unused-imports@2.0.0 --save-dev

 

이제 eslintrc.json을 설정해줘야 한다.

 

딱히 세세한 설정이 필요한것은 아니기에 단순하게 plugin에 추가해준 뒤 rule에 unused-import 사용 시 에러가 출력되도록 설정을 추가해준다.

{
    plugins: [...,"unused-imports"],
    rules: {
    ...any,
    "unused-imports/no-unused-imports": "error",
    }
}

 

이제 기존 eslint rule에 unused import 관련 rule이 추가되었으니 vscode를 한 번 reload한 뒤 확인해보면 잘 동작하는것을 확인할 수 있다.

 

에러가 출력되는 것을 확인했으면 이제 기존 코드를 fix할 차례이다. eslint를 —fix 명령어와 함께 직접 실행시켜 기존 에러들을 수정해준다.

 

[명령어]

 node [린트 경로] -c [린트 rc파일 경로] --quiet --ignore-pattern **/@test/**/*.ts --ignore-pattern **/__tests__/**/* --ignore-pattern **/@test/**/*.tsx [타겟 경로] --fix

 

위와 같은 양식으로 명령어를 입력해서 lint 에러를 수정하는 로직을 실행해주자

 

결과를 확인해보니 약 3500개의 파일이 변경되었다. 실행 시간이 오래 걸린 이유가 있었다…

 

제거 이후 tsc 컴파일 시간을 확인하여 비교해보니약 10%정도의 성능 개선을 확인할 수 있겠다. 약간의 오차가 있을수도 있지만 이정도면 유의미한 결과라 생각하며 코드 정리 차원에서도 이번 기능은 도움이 될 것으로 예상되기에 해당 기능을 적용할 예정이다.