-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7f6ec54
commit 515dcc0
Showing
1 changed file
with
111 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
# 자바스크립트 데드 코드 | ||
|
||
## Dead Code Elimination | ||
- 컴파일러가 프로그램 결과에 영향을 미치지 않는 코드를 제거하기 위한 컴파일러 최적화 | ||
- 각 언어마다 지원 | ||
|
||
### 왜 데드코드를 관리해야 하는가? | ||
- 유지보수시 방해 | ||
- 불필요하게 export하는 변수가 많으면 IDE에서 자동 import할 때 속도도 느려짐 | ||
- 비슷한 심볼들이 많아지면 개발자로 하여금 헷갈리게 하는 방해요소가 됨 | ||
- 신규 동료가 합류하게 되는 경우 인지해야할 요소들이 불필요하게 늘어남 | ||
- 소나큐브 같은 정적 코드 분석 툴을 사용할 때 정말 개선이 필요한 부분이 아닌데 검사의 대상이 됨 | ||
|
||
### 데드코드 정리 도구 활용 | ||
#### ts-prune | ||
- 사용되지 않고 있는 export된 변수를 찾아준다. | ||
- 2023-10-14 기준 maintanence mode가 되었기 때문에 비추 | ||
|
||
``` bash | ||
ts-prune -p tsconfig.json // tsconfig 설정파일 전달 | ||
``` | ||
|
||
- 사용되고 있는 변수도 결과에 나오는 경우가 있다. | ||
- export 됐지만, 파일 외부에서는 사용하지 않고 내부에서 사용하는 경우도 결과에 나온다. | ||
- 해당 정보를 필터링하는 옵션이 최근 추가됐다.) | ||
- index.ts에서 한번에 묶어서 export하는 경우 잡히지 않음 | ||
|
||
#### ts-remove-unused | ||
- 명령어를 실행하면 사용되지 않는 코드를 찾아 제거해 준다. | ||
- line에서 공개한 오픈소스 | ||
- `--skip` 옵션으로 ignore할 파일을 지정할 수 있으나 하나하나 찾아 설정해줘야하는 점이 불편함 | ||
- 리액트 최상위 파일 App.tsx 라거나 schema.tsx 등 | ||
- 실제로 사용하는 부분이 있음에도 지워지는 경우가 있음 | ||
|
||
#### knip | ||
- ts-prune 메인테이너가 추천하는 도구 | ||
- 사용되지 않는 파일, 변수, 타입, 의존성 등을 찾아주고 export된 것중에 이름이 겹치는 것도 알려줌 | ||
- 설정파일에 애플리케이션의 엔트리 파일들, 검사에 포함할 파일들에 대한 필터링을 할 수 있다. | ||
|
||
``` js | ||
import type { KnipConfig } from 'knip'; | ||
|
||
const config: KnipConfig = { | ||
entry: ['src/index.ts'], // 애플리케이션이 시작될 때 엔트리 포인트가 되는 부분 설정가능 | ||
project: ['src/**/*.ts'], | ||
}; | ||
|
||
export default config; | ||
``` | ||
|
||
- 이외의 도구들 | ||
- https://www.npmjs.com/package/find-unused-exports | ||
- https://www.npmjs.com/package/unimported | ||
- https://github.com/sweepline/eslint-plugin-unused-imports | ||
|
||
## Tree Shaking | ||
> tree shaking is a dead code elimination technique that is applied when optimizing code. | ||
- 진입점에서 시작하여 사용하지 않는 코드를 제거하는 방식 | ||
|
||
### ESM 모듈 시스템 | ||
- CommonJS 모듈 방식에서 ESM 모듈 방식으로 바뀌면서 모듈 로딩을 정적으로 구문 분석이 가능해짐 | ||
- 따라서 전체 종속성 트리를 추론할 수 있게 됨 | ||
|
||
|
||
### Next.js Modularize Import | ||
- 많은 페키지들이 barrel file을 많이 사용한다 | ||
|
||
``` js | ||
import { Row, Grid as MyGrid } from 'react-bootstrap' | ||
import { merge } from 'lodash' | ||
``` | ||
|
||
- 하지만 모듈에 따라 사용하지 않는 모듈이 import 되는 경우가 있다. | ||
- ESM 기반으로 번들링 되어있는 모듈을 사용하여 트리쉐이킹이 되도록 하거나 | ||
- 사용하는 패키지를 특정해서 가져와야함 | ||
|
||
``` js | ||
import Row from 'react-bootstrap/Row' | ||
import MyGrid from 'react-bootstrap/Grid' | ||
import merge from 'lodash/merge' | ||
``` | ||
|
||
- Next.js가 13으로 업데이트되면서, modularizeimports 기능이 stable 되었음 | ||
- 기존 babel-plugin-transform-imports와 같은 기능을 제공 | ||
|
||
``` js | ||
module.exports = { | ||
modularizeImports: { | ||
'lodash': { | ||
transform: 'lodash/{{member}}', | ||
}, | ||
}, | ||
}; | ||
|
||
|
||
// Before | ||
import { merge } from 'lodash' | ||
|
||
// After | ||
import merge from 'lodash/merge' | ||
``` | ||
|
||
|
||
|
||
## Dead Code Elimination vs Tree Shaking | ||
![image](https://github.com/10000-Bagger/free-topic-study/assets/80238096/f0b2a53a-89a5-48cc-8049-ab5fe63d42b9) | ||
|
||
- 데드 코드 제거: 모든 재료를 넣고 필요한 것을 골라내는 것 | ||
- 트리 쉐이킹: 애초에 필요한 것만 골라서 넣는 것 | ||
- 더 효율적인 방법 |