반응과 웹팩의 차이점은 무엇입니까

차이점: 1. React는 JavaScript 프레임워크인 반면 webpack은 JavaScript 애플리케이션을 위한 정적 모듈 패키저입니다. 2. React는 주로 사용자 인터페이스를 구축하는 데 사용되는 반면 webpack은 다시 로드하고 컴파일할 수 있으며 모든 정적 리소스는 병합할 수 있습니다. 따라서 io 요청이 줄어듭니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React란 무엇입니까

React는 사용자 인터페이스 구축을 위한 JavaScript 프레임워크입니다.

프레임워크: 재사용할 수 있는 코드. 더 많은 사람들이 사용할수록 더 유명해지고, 더 많은 사람들이 사용할수록 더 가치가 높아집니다. (웃음)

React 못지않게 Angular도 유명해요.

React는 UI를 구현하기 위한 JS 라이브러리입니다.

React 웹 앱 솔루션, 파생된 React Native는 크로스 스크린 앱 솔루션입니다.

특징:

• 선언적 디자인: 선언 패러다임

• 효율성: VDOM을 사용하여 DOM 상호 작용 줄이기

• 유연성: 알려진 라이브러리 또는 프레임워크와 완벽하게 협력

• JSX: JS의 많은 결함을 해결하려고 시도하는 독립 언어, ES6에는 거의 모든 JSX 기능이 통합되어 있습니다.

• 구성 요소: 코드 재사용

• 단방향 응답 데이터 흐름: 양방향 바인딩보다 더 간단하고 빠릅니다.

React를 사용하는 이유

기존 방식으로는 DOM을 운용하는 경우가 많고 성능이 요구 사항을 충족하지 못합니다. React는 성능이 뛰어난 VDOM을 사용합니다.

기존 JS 코드 유지 비용이 높고 React는 컴포넌트 기반입니다. development

모바일 개발 지원 필요

React의 단점:

• JS, jQuery를 사용해 온 기존 프런트엔드의 경우 React는 매우 비우호적입니다.

• React는 구성 요소와 상태 관리를 강조하며, 세계관은 프로그래밍 언어 중심입니다 ​​

• Vue.js 뷰의 자동 동기화를 강조하며 세계관은 UI 스크립트 중심입니다

• React의 학습 비용이 Vue.js보다 높습니다. .

• React에는 패밀리 버킷이 없으며 UI만 있습니다

webpack이란 무엇입니까

기본적으로 webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 번들러(모듈 번들러)입니다. webpack은 애플리케이션을 처리할 때 애플리케이션에 필요한 모든 모듈을 포함하는 종속성 그래프를 반복적으로 구축한 다음 이러한 모든 모듈을 하나 이상의 번들로 패키징합니다.

Webpack은 생산 라인과 같습니다. 소스 파일을 출력 결과로 변환하기 전에 일련의 처리 과정을 거쳐야 합니다. 이 생산 라인의 각 처리 프로세스에는 단일 책임이 있으며 여러 프로세스 간에 종속성이 있습니다. 현재 처리가 완료된 후에만 처리를 위해 다음 프로세스로 넘겨질 수 있습니다. 플러그인은 생산 라인에 삽입되어 특정 시간에 생산 라인의 리소스를 처리하는 기능과 같습니다.

webpack은 Tapable을 사용하여 이 복잡한 생산 라인을 구성합니다. Webpack은 실행 프로세스 중에 이벤트를 브로드캐스트합니다. 플러그인은 관심 있는 이벤트만 수신하면 되며 이 생산 라인에 참여하여 생산 라인의 작동을 변경할 수 있습니다. webpack의 이벤트 흐름 메커니즘은 플러그인의 질서를 보장하여 전체 시스템의 확장성을 높여줍니다.

webpack 빌드 프로세스

Webpack의 실행 프로세스는 다음 프로세스가 처음부터 끝까지 실행됩니다.

• 초기화 매개변수: 구성 파일 및 Shell 문에서 매개변수를 읽고 병합하고, 최종 매개변수.

• 컴파일 시작: 이전 단계에서 얻은 매개변수로 Compiler 객체를 초기화하고, 구성된 모든 플러그인을 로드한 후 객체의 run 메소드를 실행하여 컴파일을 시작합니다.

• 항목 확인: 구성 항목을 기반으로 모든 항목 파일을 찾습니다.

• 모듈 컴파일: 항목 파일에서 시작하여 구성된 모든 로더를 호출하여 모듈을 변환한 다음 모듈이 의존하는 모듈을 찾은 다음 모든 항목 종속 파일이 처리될 때까지 이 단계를 반복합니다. 단계.

• 완전한 모듈 컴파일: 4단계에서 Loader를 사용하여 모든 모듈을 번역한 후 각 모듈의 최종 번역된 내용과 모듈 간의 종속성을 얻습니다.

• 출력 리소스: 항목과 모듈 간의 종속 관계에 따라 여러 모듈을 포함하는 청크로 조립한 다음 각 청크를 별도의 파일로 변환하고 출력 목록에 추가합니다. 출력 콘텐츠의 마지막 기회입니다.

• 출력 완료: 출력 내용을 결정한 후 구성에 따라 출력 경로와 파일 이름을 결정하고 파일 내용을 파일 시스템에 씁니다.

위 프로세스에서 Webpack은 특정 시점에 특정 이벤트를 브로드캐스트합니다. 플러그인은 관심 있는 이벤트를 청취한 후 특정 로직을 실행하며, 플러그인은 Webpack에서 제공하는 API를 호출하여 변경할 수 있습니다. Webpack의 실행 결과.

react와 webpack의 차이점

React는 UI 렌더링을 위한 JS 라이브러리이자 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 프레임워크입니다.

Webpack은 여러 개의 js 파일을 하나의 파일로 패키징할 수 있는 번들러입니다(실제로 js 파일뿐만 아니라 CSS 파일, json 파일 등 다른 유형의 파일도 패키징할 수 있습니다).

webpack

• 의 역할은 다시 로드하고 컴파일하는 것입니다. 실제로 수행하는 작업은 브라우저가 인식하지 못하는 구문을 브라우저가 인식하는 구문으로 컴파일하는 것입니다. 예를 들어 less는 CSS로 컴파일되고, ES6 구문은 ES5로 변환됩니다.

• IO 요청을 줄이세요. 일반적으로 요청한 후 브라우저에 HTML을 반환합니다. 이때 콘솔을 열면 HTML 페이지에서 스크립트, 링크, 기타 태그를 통해 참조되는 정적 리소스를 찾을 수 있으며, 브라우저는 이러한 리소스를 얻기 위해 또 다른 요청을 보냅니다. 그러나 webpack의 패키징은 모든 정적 리소스를 병합하고 IO 요청을 줄입니다.

【관련 추천: Redis 비디오 튜토리얼】

위 내용은 반응과 웹팩의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!