Por que o tamanho do arquivo do React é tão grande devido à sua API pequena?

87

Aqui estão os números

  • min + gzip 26k
  • gzip 90k
  • 450 + k original

E o React não tem muitos recursos em sua documentação. Por que é tão grande?

Tenho a sensação de que é a implementação de DOM leve. Mas eu quero ter certeza.

Eldar Djafarov
fonte
4
Você deu uma olhada na fonte, para ver o que ela faz? Dica útil, não olhe para a versão reduzida.
Sr. Lister
6
Decidi perguntar antes de mergulhar no código. Embora, como estou planejando usar o
react
2
26k não é tão grande assim ..
BT
As pessoas estão dizendo que reagir não é grande coisa. Sim, o reactjs em si é muito pequeno (6,41 KB para a versão 16.1.1), mas lembre-se de que o React requer um ReactDOM para funcionar e o ReactDOM tem 92,4 KB de tamanho
Dinh Tran

Respostas:

186

React faz bastante! A maior parte não óbvia do React é provavelmente o sistema de eventos - o React não apenas implementa seu próprio despacho e borbulhamento de eventos, como normaliza eventos comuns em navegadores para que você não precise se preocupar tanto com isso. Por exemplo, SelectEventPlugin é um "plugin" de evento integrado que fornece umonSelect evento que se comporta da mesma maneira em todos os navegadores.

A implementação virtual do DOM também exige uma quantidade decente de código; muito esforço é gasto na otimização do desempenho, razão pela qual a versão não minimizada inclui ReactPerf , que é uma ferramenta para medir o desempenho de renderização. Ao atualizar o DOM, o React também faz algumas coisas convenientes para você, como manter qualquer seleção de entrada e manter a mesma posição de rolagem atual.

O React também tem alguns outros truques na manga. Um dos mais legais é que ele suporta totalmente a renderização de um componente para uma string HTML, mesmo se você não tiver um ambiente de navegador, então você pode enviar uma página que funciona antes mesmo de o JS ser carregado.


Com o que você está comparando o React? react-15.0.2.min.jsé 43k (gzipped), mas jQuery é 33k enquanto ember-2.6.0.prod.jsé 363k (also gzipped). Obviamente, esses frameworks não fazem exatamente as mesmas coisas, mas eles têm muita sobreposição, então acho que a comparação é razoável.

Se você está preocupado com o tamanho do download, eu não me preocuparia muito com o código JS contribuindo para isso. Aqui está um anúncio que vejo no lado direito da minha página Stack Overflow agora:

Seu tamanho de download é de 95k - eu não pensaria duas vezes antes de incluir uma imagem como essa em uma página porque (mesmo se eu estivesse preocupado com o desempenho) geralmente há muitas outras coisas relacionadas ao desempenho para consertar que são mais lucrativas.


Resumindo, não acho que o React seja tão grande, e o tamanho que ele tem vem das muitas pequenas coisas que ele faz para te ajudar. Você cita a pequena API do React como um motivo pelo qual o código do React deve ser pequeno, mas uma pergunta melhor poderia ser: "Como a API do React pode ser tão simples, considerando todas as coisas que ela faz por você?"

… Mas essa é uma questão totalmente separada. :) Espero ter respondido sua pergunta - feliz em expandir se não o fiz.

Sophie Alpert
fonte
4
Você respondeu totalmente à minha pergunta. React é incrível. Estou pensando em usá-lo para celular, então o tamanho é importante. Só que não há muita informação sobre o que ele faz. E estou pensando que há mais truques que posso usar :) Eu sinto que posso me livrar das coisas do jquery. E paulmillr / exoesqueleto chegou bem na hora :)
Eldar Djafarov
2
Estou cavando em um conceito totalmente diferente de construção de aplicativos. Verifique vimeo.com/78151404 e github.com/component/component - usando aqueles que você não precisa de jQuery e compy funciona bem com jsxtransformations. E o React faz o trabalho mais difícil - todo o resto (modelos, roteamentos, comunicação do servidor) pode ser coberto por microcomponentes.
Eldar Djafarov
29
Nota, estamos usando React no site móvel do Facebook, onde o tamanho é definitivamente extremamente importante :)
Vjeux
4
@lightblade Hum ... não. O uso da memória depende de quantas alocações seu código faz. O React se esforça ao máximo para evitar alocações.
Dan Abramov
2
@ 1nfiniti Ok, atualizado com alguns novos números já que faz dois anos e meio.
Sophie Alpert
-1

Algumas reflexões ... Eu tinha algumas das mesmas preocupações com o tamanho, mas depois de usá-lo, não é brincadeira, eu usaria se tivesse 5 MB. É muito bom. Dito isso, decidi reduzir o máximo possível de dependências de outras bibliotecas. Eu estava usando jquery para duas coisas .. ajax e a resposta automática de ajax e tratamento de solicitação (beforeSend, etc) que trataria quando um token estivesse em uma resposta após o login e, em seguida, certifique-se de que cada solicitação ajax o adicionasse ao cabeçalho de autorização antes enviando. Substituí isso por um pequeno pedaço simples de javascript nativo. Funciona bem. Além disso, estava tentando usar _underscore. Substituí-o pelo lodash, que é menor e mais rápido, embora atualmente não o esteja usando, então posso removê-lo completamente.

Aqui está um artigo, de muitos no google, que descobri que tem algumas alternativas de usar JS nativo em vez de jquery.

http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/

user3317868
fonte
1
Você também pode simplesmente construir uma versão personalizada do jQuery com as peças que você usa se você está almejando vários navegadores
Dan Heberden