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

리액트 네이티브의 고질적 문제점 하나인 답답한 빌드 속도는 한 번이라도 RN 셋업을 경험해봤다면 공감할 것이다.

게다가 외부 라이브러리의 설치의 의존도가 높아지면 그 정도는 심해진다.

 

원인은 javascript 코드와 native 코드 간의 번들링 과정이 가장 큰 요인이다.

그리고 앱을 끄고 재실행하게 되면 처음부터 다시 모든 파일을 번들링한다.

이는 캐쉬화가 되지 않았기 때문인데, 캐쉬화를 시키게 된다면 캐싱된 소스들은 번들링을 할 필요가 없기 때문에 극단적으로 번들링을 해야 할 소스코드가 줄어든다.

결과적으로 빌드 속도를 향상시켜준다. 

 

캐쉬화 세팅을 통해 생산성을 높여보자!

 

안드로이드(AOS)

(1) Gradle 설정 변경

Android 앱을 빌드할 때 Gradle은 종속성을 다운로드하고 캐시에 저장한다. 기본적으로 Gradle은 인터넷에서 종속성을 가져오기 때문에 느릴 수 있다. 이를 해결하기 위해 Gradle 설정을 변경할 수 있다. android/gradle.properties 파일에 다음과 같은 설정을 추가하여 로컬 캐시를 사용할 수 있다.

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

 

(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',
    ],
  },
};

아이폰(iOS)

(1) Xcode 설정 변경하기

Xcode 설정을 조정하여 빌드 속도를 개선할 수 있다. Xcode의 "Build Settings" 탭에서 다음 설정을 변경하면 빌드 속도를 개선할 수 있다.

• Build Active Architecture Only: Yes로 설정하여 현재 빌드 아키텍처만 빌드하도록 지정한다. 
• Generate Debug Symbols: No로 설정하여 디버그 심볼을 생성하지 않도록 한다.

 

(2) 컴파일 최적화 설정 변경하기

Xcode의 "Build Settings" 탭에서 다음 설정을 변경하면 컴파일 속도를 개선할 수 있다.

• Enable Bitcode: No로 설정하여 Bitcode를 사용하지 않도록 설정한다.
  
  

결과

프로젝트 및 환경에 따라 많이 상이하겠지만, 캐쉬화없이 실행했을 때 빌드 완료까지 평균적으로 10~15분 걸리던 프로젝트가 위의 작업을 거친 후 2~3분으로 대폭 개선됨을 알 수 있었다.