React에 내장된 프로덕션과 개발의 차이점JS

React에 내장된 프로덕션과 개발의 차이점JS

했는데 리액션을 사용한 .Webpack생산 및 개발 빌드를 만듭니다.그러나 이 두 빌딩의 차이점이 무엇인지, 그리고 어떤 빌딩을 언제 사용해야 하는지에 대한 설명은 없었습니다.인터넷을 검색해 봤지만 도움이 되는 것을 찾지 못했어요.제가 읽지 못한 튜토리얼이나 설명을 가지고 계신 분이 있습니까?

개발 빌드는 이름에서 알 수 있듯이 개발 목적으로 사용됩니다.이러한 빌드에는 소스 맵, 디버깅 및 종종 핫 새로고침 기능이 있습니다.

한편, 실가동 빌드는 실가동 모드로 실행됩니다.즉, 이것은 클라이언트의 머신에서 실행되고 있는 코드입니다.프로덕션 빌드는 uglify를 실행하고 소스 파일을 하나 이상의 최소화된 파일로 빌드합니다.또한 CSS와 이미지 및 웹 팩으로 로드하는 다른 소스도 추출합니다.핫 새로고침도 포함되어 있지 않습니다.은 웹 팩에 될 수 .devtool 설정을 지정합니다.

실가동 환경과 개발 환경의 구분은 고객의 취향과 요건에 따라 다릅니다.즉, Webpack 구성에 기입하는 내용에 따라 크게 달라집니다.

웹 팩 제작 문서는 매우 간단합니다.또한 기사 Webpack 3 + React — Production Build Tips에서는 React with Webpack용 프로덕션 빌드를 작성하는 프로세스에 대해 설명합니다.

가장 기본적인 차이점은 프로덕션 빌드는 Javascript 코드의 보기 흉하고 최소화된(압축된) 버전을 가지고 있기 때문에 최종 사용자의 브라우저에서의 파일 렌더링이 매우 빠르고 성능이 향상된다는 것입니다.

또한 운영 빌드가 웹 사이트에서 사용되고 있는지 여부를 확인할 수 있습니다. 구글 플러그인 확장을 브라우저에서 활성화하면 웹 사이트가 프런트 엔드에서 react js를 사용하고 있는지 여부를 항상 알 수 있으며 빌드 유형이 운영인지 개발인지도 알 수 있습니다.

리액션이 개발 빌드일 때

React 및 React DOM의 프로덕션 지원 버전도 단일 파일로 제공됩니다.

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

메모: Respect 파일만 다음 문자로 끝납니다..production.min.js생산에 적합합니다.

실제 구현된 애플리케이션의 퍼포먼스에 영향을 미치기 때문에 실제 운영 및 개발 구축이 실현됩니다.또한 어플리케이션이 전개되는 장소가 완전히 다른 대륙이기 때문에 UI에서 개발 빌드 js 파일을 렌더링하는 것은 사용자 익스피리언스를 향상시키기 위해 매우 선명하고 콤팩트하며 압축되어 UI에 로드되는 것과 비교하여 시간이 많이 걸립니다.여기를 클릭해 주세요.

react.development.js는 디버깅, hmr(핫모듈 새로고침) 등의 추가 기능을 제공하며 웹팩, 패키지, vite 등의 번들러의 도움을 받아 앱을 개발할 때 사용할 수 있는 기타 많은 기능을 제공합니다.이 번들러는 운영 환경에 도입할 코드를 번들하여 최소화합니다.

이러한 미니 파일은 실제 가동 환경에 도입됩니다.이 때문에 어플리케이션에서는 사용되지 않는 불필요한 파일이 많이 삭제됩니다(번들러 및 기타 많은 파일이 고속화되었기 때문에 현재는 필요 없습니다).

언급URL : https://stackoverflow.com/questions/48151128/difference-between-production-and-development-build-in-reactjs