"The code generator has deoptimised..."의 뜻이 무엇일까?

무슨 뜻일까?

CRA로 시작한 프로젝트의 기존 번들러 Webpack을 Vite로 마이그레이션 하는 중에 "The code generator has deoptimised the styling of..."라는 로그가 보여서 무슨 의미인지 궁금했다. 찾아보니 이것은 Babel의 compact 옵션과 관련이 있었다.

 

이 옵션은 개행(newlines)과 공백(whitespace)을 결과 코드에서 생략할지에 대한 여부를 결정하는 데 사용되고, 이 설정 값에 따라 추가적인 공백이나 개행을 제거할 수 있다.

export function setupCounter(element) {
  let counter = 0
  const setCounter = (count) => {
    counter = count
    element.innerHTML = `count is ${counter}`
  }
  element.addEventListener('click', () => setCounter(counter + 1))
  setCounter(0)
}

compact 옵션을 사용하여 컴파일 해보자.

npx babel counter.js --out-dir lib --compact

이렇게 counter.js 파일을 compact 옵션과 함께 컴파일하면, 다음과 같은 결과물이 생성된다:

export function setupCounter(element){let counter=0;const setCounter=count=>{counter=count;element.innerHTML=`count is ${counter}`;};element.addEventListener('click',()=>setCounter(counter+1));setCounter(0);}

기본값은 auto로, 코드의 길이(length)가 500,000보다 크면 true, 작으면 false로 설정된다. 파일 크기로는, 영문자 및 숫자가 1바이트니까 약 500KB가 넘으면 활성화 된다.

컴파일 시, 파일의 크기가 500KB가 넘어가면 나타나는 메시지

"The code generator has deoptimised the styling of..."로만 보면 최적화를 하지 않았다라는 뜻으로 보이는데, 뭔가 찝찝해서 열심히 검색해봤지만 해당 내용에 대한 정확한 자료는 찾지 못했다.

결론

컴포넌트 파일 하나에 500KB라니..너무 큰 것 같다. 이건 결국 리팩토링이나 최적화를 하라는 경고 메시지가 아닐까.