리액션의 파일들은 왜 작은 API로 인해 그렇게 큰가?
여기 숫자가 있다.
- min+gzip 26k
- gzip 90k
- 오리지널 450+k
그리고 React는 설명서에 많은 기능을 가지고 있지 않다.왜 이렇게 커?
나는 그것이 가벼운 DOM의 구현이라는 느낌이 든다.하지만 나는 확신하고 싶다.
리액션은 꽤 효과가 있다!리액션의 가장 눈에 띄지 않는 부분은 아마도 이벤트 시스템일 것이다. 리액션은 자체적인 이벤트 발송과 거품을 구현하는 것 뿐만 아니라 브라우저에 걸친 일반적인 이벤트를 정상화시켜 당신이 그것에 대해 많이 걱정할 필요가 없도록 한다.예를 들어 SelectEventPlugin은 다음을 제공하는 내장 이벤트 "plugin"이다.onSelect
모든 브라우저에서 동일한 방식으로 동작하는 이벤트
가상 DOM 구현에는 상당한 양의 코드도 필요하다. 성능 최적화에 많은 노력이 소요된다. 그래서 미완성 버전에는 렌더링 성능 측정 도구인 ReactPerf가 포함되어 있다.DOM 업데이트 시 React는 입력 선택 항목을 유지하고 현재 스크롤 위치를 동일하게 유지하는 것과 같은 몇 가지 편리한 작업을 수행하기도 한다.
리액션은 또한 몇 가지 다른 속임수를 가지고 있다.브라우저 환경이 없어도 HTML 문자열로 구성요소를 렌더링할 수 있어 JS가 로드되기도 전에 작동되는 페이지를 내려보낼 수 있다는 점이 가장 멋지다.
리액션을 무엇에 비교하는 겁니까? react-15.0.2.min.js
이다43k (gzipped)
, 그러나 jQuery는 33k이다.ember-2.6.0.prod.js
이다363k (also gzipped)
. 분명히 이 프레임워크들은 정확히 같은 일을 하는 것은 아니지만 중복되는 부분이 많기 때문에 비교하는 것이 타당하다고 생각한다.
다운로드 크기가 걱정된다면, 나는 JS코드가 그것에 기여하는 것에 대해 크게 걱정하지 않을 것이다.지금 내 스택 오버플로 페이지 오른쪽에 있는 광고가 있다.
다운로드 크기는 95k 입니다. -- 한 페이지에 그런 이미지를 넣는 것에 대해 두 번 생각하지 않을 겁니다. (성능에 대해 걱정했더라도) 보통 더 수익성이 좋은 성능 관련 것들이 많기 때문이지요.
요컨대 리액션은 그렇게 크지도 않고, 그 크기가 어느 정도 되는지는 그것이 당신을 돕기 위해 하는 많은 작은 일들에서 나온다고 생각한다.리액션의 코드가 작아야 하는 이유로 리액션의 작은 API를 들 수 있지만, 더 좋은 질문은 "리액션의 API가 당신에게 해 주는 모든 것을 감안할 때 어떻게 그렇게 간단할 수 있는가?"일 것이다.
…하지만 그건 전혀 별개의 문제야.:) 내가 당신의 질문에 대답하기를 희망한다. 그렇지 않다면 기꺼이 확장하겠다.
몇 가지 생각이..나도 사이즈에 대해 같은 고민을 했지만, 사용한 후 장난이 아니라 5MB면 쓸 거야.그저 그 정도로 좋다.그렇긴 하지만, 나는 가능한 한 다른 도서관에 대한 의존도를 줄이기로 결정했다.나는 jquery를 두 가지 용도로 사용했다.ajax 및 로그인 후 토큰이 응답 중일 때 처리하는 자동 ajax 응답 및 요청 처리(보내기 전 등)를 확인한 다음 모든 ajax 요청이 승인 헤더에 추가되었는지 확인한 후 전송하십시오.나는 이것을 아주 작고 간단한 네이티브 자바스크립트로 대체했다.잘 됐네.또한, 나는 _underscore를 사용하려고 했다.나는 그것을 lodash로 교체했는데, 그것은 더 작고 더 빠르지만, 나는 현재 그것을 사용하지 않기 때문에 완전히 제거할 수도 있다.
여기 구글의 많은 기사들 중, Jquery에 대한 네이티브 JS를 사용하여 몇 가지 대안이 있다는 것을 발견했다.
http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/
참조URL: https://stackoverflow.com/questions/19807946/why-is-reacts-filesize-so-big-given-its-small-api
'IT이야기' 카테고리의 다른 글
Vue.js - url에서 해시방 #!을 제거하는 방법? (0) | 2022.03.07 |
---|---|
마지막 요소에만 애니메이션을 적용하는 Vue.js (0) | 2022.03.06 |
v-html 내부 Vue.js v-model (0) | 2022.03.06 |
리디렉션 후 vuejs 글로벌 이벤트를 사용하여 알림 방법 (0) | 2022.03.06 |
상태 es6 리액션 지우기 (0) | 2022.03.06 |