Million Lint: React 웹 성능 향상 도구

최소희·2024년 4월 15일

프론트엔드

프론트엔드 학습

목록 보기

11/14

Million Lint란?

Million Lint는 React 웹 애플리케이션의 성능을 향상시키는 데 도움을 주는 React를 위한 최적화 컴파일러이다.

주요 기능은 느린 코드를 식별하고 수정하는 제안을 제공해주는 것이다. (성능을 위한 ESLint라고 생각하면 쉽다.)

React Devtools와 Miilion Lint의 차이

React Profiler Flamegraph를 보면 느린 코드를 찾는 것이 어렵다는 것을 느끼는 경우가 많다.

이는 웹에서 호출된 모든 함수, 네트워크 요청, 사용자 상호 작용 등 다양한 정보들을 처리해야하기 때문이다.

이렇게 복잡성을 적절히 관리할 수 있는 지식이 부족한 상황에서 Miilion Lint는 동적 분석을 통해 얻은 데이터를 Extension을 통해 빠르고 쉽게 제공해준다.

Complier or Runtime?

JavaScript 컴파일러를 사용하면 소스 코드에 대한 정적 분석을 수행할 수 있다. 성능 최적화를 위해 ESLin와 같은 정적 분석은 광범위한 문제를 발견할 수 있어 매우 효과적이다.

그러나 실제로 실행하지 않고는 작업이 얼마나 느릴지 예측할 수 없기 때문에 Million Lint를 단순히 컴파일러로만 구성됐다고 보기 힘들다.

반대로 런타임의 경우에는 앱을 직접 실행하고 렌더링 정보를 얻을 수 있다는 단점이 있지만, 원본 소스(변환된 소스 코드가 아닌)가 없어 “컴포넌트의 어느 부분이 리렌더링 됐는지?”, “어느 부분이 이런 변화를 일으켰는지?” 등에 대한 질문에 답을 할 수 없다.

💡 그래서 Million Lint는 런타임 분석과 정적 분석을 결합하여, 필요한 데이터 흐름을 하향식으로 따라가며 각 컴포넌트 렌더링을 이해하고 구축하는 React 용으로 설계된 라이브러리로 개발되었다.

Million Lint시작 방법

기본 세팅

1. NPM package 설치

yarn add @million/lint@latest

2. VScode extension 설치

VSCode Marketplace에서 Million Lint extension 설치

3. 애플리케이션에 컴파일러 추가

// Create React App

const MillionCompiler = require('@million/lint');
 
module.exports = {
  plugins: [MillionCompiler.craco({ legacyHmr: true })],
};

// Next.js

import MillionCompiler from '@million/lint';
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};
 
export default MillionCompiler.next({ 
  rsc: true // if used in the app router mode
})(nextConfig);

import MillionCompiler from '@million/lint';

Million Lintsms React 컴포넌트를 개별적으로 동적 분석을 실행하는 컴파일러로 시작된다.

런타임 중에 아래와 같이 inject(주입된) 핸들러는 개발 모드에서 웹앱과 상호 작용할 때 렌더링, 타이밍, 메타데이터 정보를 캡처한다.

이 접근 방식을 사용하면, JavaScript 컴파일러 덕분에 소스 코드에 대한 액세스를 유지하면서 앱 실행에서 런타임 프로파일링 데이터를 얻을 수 있다.

// 원본 코드 

function App({ start }) {
 
  const [count, setCount] = useState(start);
 
  useEffect(() => {
    console.log('double: ', count * 2);
  }, [count]);
 
  return <Button onClick={() => setCount(count + 1)}>{count}</Button>;
}

// 컴파일된 코드
function App({ start }) {
 
  Million.capture({ start });  // ✨ inject
  const [count, setCount] = Million.capture(useState)(start);  // ✨ inject
 
  useEffect(
    () => {
      console.log("double: ", count * 2);
    },
    Million.capture([count]),  // ✨ inject
  );
 
  return Million.capture(  // ✨ inject
    <Button onClick={() => setCount(count + 1)}>{count}</Button>,
  );
}

렌더링을 캡처한 후, 컴파일러가 비동기적으로 번들, 네트워크 그리고 상태 관리와 관련한 데이터들을 수집한다.

그리고 VSCode extension을 통해 해당 결과물을 확인할 수 있다.

// psuedo code of collected data:
[
  {
    kind: 'state',
    count: 7,
    time: 0.1,
    changes: [{ prev: 0, next: 8 }, ...],
  },
  // and so on...
];