프로덕션 빌드 활용

• React에는 유용한 경고가 많이 포함되어 있습니다. 이 경고들은 개발하는데 있어 매우 유용하다. 그러나 그 경고는 React를 더 크고 느리게 만들기 때문에 앱을 배포할 때 프로덕션 버전을 사용해야 한다.
• 빌드 프로세스가 올바르게 설정되었는지 잘 모르는 경우에는 React Developer Tools for Chrome를 설치하여 확인할 수 있다.
• 프로덕션 모드의 React 기반 사이트에 접속하면 아이콘의 배경이 어두운 색으로 표시됩니다.

• 개발 모드의 React 기반 사이트에 접속하면 아이콘의 배경이 빨간색으로 표시된다.

• 앱을 개발할 때는 개발 모드를, 사용자에게 앱을 배포할 때는 프로덕션 모드를 사용해야 합니다.

프로덕션 용도의 앱을 제작

Create React App

프로젝트가 Create React App 기반이라면 아래 명령어를 실행하세요.

npm run build 명령어를 실행하면 프로젝트의 build/ 폴더에 애플리케이션의 프로덕션 빌드파일이 만들어집니다.

프로덕션 환경에 배포하기 전에만 필요하다는 것을 기억하세요. 정상적인 개발 환경에선 npm start를 이용하세요.

단일 파일 빌드

React 및 React DOM의 프로덕션 준비 버전을 단일 파일로 제공합니다.

// cdn
<script src="<https://unpkg.com/react@18/umd/react.production.min.js>"></script>
<script src="<https://unpkg.com/react-dom@18/umd/react-dom.production.min.js>"></script>

.production.min.js로 끝나는 React 파일만이 프로덕션 환경에 적합합니다.

Webpack

• Webpack v4 이상에서는 프로덕션 모드에서 기본적으로 코드를 축소한다.

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin({ /* additional options here */ })],
  },
};