[React Native] 빌드 속도 향상 (캐시화)

 

리액트 네이티브는 외부 라이브러리 의존도가 높아질수록 빌드 속도 문제가 더욱 심각해집니다.

이러한 문제의 가장 큰 원인은 자바스크립트 코드와 네이티브 코드 간의 번들링 과정에 있습니다. 앱을 껐다가 다시 실행하게 되면, 모든 파일을 처음부터 다시 번들링하게 되는데, 이는 캐시가 제대로 적용되지 않았기 때문입니다.
캐시를 설정해두면 이미 캐싱된 소스코드는 번들링할 필요가 없기 때문에, 번들링해야 할 소스의 양이 극단적으로 줄어들게 되고, 결과적으로 빌드 속도를 크게 향상시킬 수 있습니다.

 

 

 

(1) Gradle 설정 변경

Android 앱을 빌드할 때, Gradle은 종속성을 다운로드하여 캐시에 저장합니다.
기본적으로 Gradle은 인터넷에서 종속성을 가져오기 때문에 빌드 속도가 느려질 수 있는데, 이 문제를 해결하기 위해 Gradle 설정을 변경할 수 있습니다.

 

android/gradle.properties 파일에 다음과 같은 설정을 추가하면 로컬 캐시를 적극적으로 활용할 수 있습니다.

// android/gradle.properties
org.gradle.caching=true
org.gradle.configureondemand=trueJAVASCRIPT

 

 

 

(2) 컴파일 시간 최적화

getTransformOptions 함수 내부에 babelTransformerPath를 추가하여 Babel Transformer를 설정할 수 있습니다.
metro-react-native-babel-preset은 React Native에서 사용되는 기본적인 Babel preset이기 때문에, 이를 설정하면 컴파일 속도가 빨라질 수 있습니다.

또한, sourceExts 배열에 필요한 파일 확장자만 추가하여 불필요한 파일 검색을 줄이는 것도 최적화에 도움이 됩니다.

// metro.config.js
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
      // babelTransformerPath 추가
      babelTransformerPath: require.resolve('metro-react-native-babel-preset'),
    }),
  },
  resolver: {
    sourceExts: [
      'js',
      'json',
      'jsx',
      'mjs',
      'ts',
      'tsx',
    ],
  },
};

참고

https://cotist.tistory.com/26

[React Native] 빌드 속도 향상시키기 (캐쉬화)