만베거
newminkyung
14 3

자바스크립트 데드 코드

Dead Code Elimination

  • 컴파일러가 프로그램 결과에 영향을 미치지 않는 코드를 제거하기 위한 컴파일러 최적화
  • 각 언어마다 지원

왜 데드코드를 관리해야 하는가?

  • 유지보수시 방해
  • 불필요하게 export하는 변수가 많으면 IDE에서 자동 import할 때 속도도 느려짐
  • 비슷한 심볼들이 많아지면 개발자로 하여금 헷갈리게 하는 방해요소가 됨
  • 신규 동료가 합류하게 되는 경우 인지해야할 요소들이 불필요하게 늘어남
  • 소나큐브 같은 정적 코드 분석 툴을 사용할 때 정말 개선이 필요한 부분이 아닌데 검사의 대상이 됨

데드코드 정리 도구 활용

ts-prune

  • 사용되지 않고 있는 export된 변수를 찾아준다.
  • 2023-10-14 기준 maintanence mode가 되었기 때문에 비추
ts-prune -p tsconfig.json // tsconfig 설정파일 전달
  • 사용되고 있는 변수도 결과에 나오는 경우가 있다.
  • export 됐지만, 파일 외부에서는 사용하지 않고 내부에서 사용하는 경우도 결과에 나온다.
    • 해당 정보를 필터링하는 옵션이 최근 추가됐다.)
  • index.ts에서 한번에 묶어서 export하는 경우 잡히지 않음

ts-remove-unused

  • 명령어를 실행하면 사용되지 않는 코드를 찾아 제거해 준다.
  • line에서 공개한 오픈소스
  • --skip 옵션으로 ignore할 파일을 지정할 수 있으나 하나하나 찾아 설정해줘야하는 점이 불편함
    • 리액트 최상위 파일 App.tsx 라거나 schema.tsx 등
  • 실제로 사용하는 부분이 있음에도 지워지는 경우가 있음

knip

  • ts-prune 메인테이너가 추천하는 도구
  • 사용되지 않는 파일, 변수, 타입, 의존성 등을 찾아주고 export된 것중에 이름이 겹치는 것도 알려줌
  • 설정파일에 애플리케이션의 엔트리 파일들, 검사에 포함할 파일들에 대한 필터링을 할 수 있다.
import type { KnipConfig } from 'knip';
 
const config: KnipConfig = {
  entry: ['src/index.ts'], // 애플리케이션이 시작될 때 엔트리 포인트가 되는 부분 설정가능
  project: ['src/**/*.ts'],
};
 
export default config;

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을 많이 사용한다
import { Row, Grid as MyGrid } from 'react-bootstrap'
import { merge } from 'lodash'
  • 하지만 모듈에 따라 사용하지 않는 모듈이 import 되는 경우가 있다.
    • ESM 기반으로 번들링 되어있는 모듈을 사용하여 트리쉐이킹이 되도록 하거나
    • 사용하는 패키지를 특정해서 가져와야함
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와 같은 기능을 제공
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

  • 데드 코드 제거: 모든 재료를 넣고 필요한 것을 골라내는 것
  • 트리 쉐이킹: 애초에 필요한 것만 골라서 넣는 것
    • 더 효율적인 방법
Content15 1