[14주차 3] 자바스크립트 데드코드

new/14-3.md

@@ -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)
+
+- 데드 코드 제거: 모든 재료를 넣고 필요한 것을 골라내는 것
+- 트리 쉐이킹: 애초에 필요한 것만 골라서 넣는 것
+  - 더 효율적인 방법