Otimizar sem mensurar, não faz sentido!

React e Babel — Como melhorar o desempenho de suas aplicações com plugins, presets e benchmark!

Eduardo Rabelo
Feb 17, 2017 · 6 min read
  • Você pode usar a propriedade key em uma lista de elementos. A idéia aqui é dar informações úteis para o React, para ele poder identificar cada elemento e realizar mínimas mutações no DOM, quando possível.

Babel, uma ferramenta poderosa!

Você provavelmente já conhece o Babel. Ele ficou famosos por permitir usar código ES6 em produção com navegadores que ainda não suportam as novidades.


Hoisting de constantes para elementos React

O primeiro otimizar proposto pelo Facebook move todas as declarações de criação de elementos que são completamente estáticos para o topo. Um componente completamente estático ou que sejam referencialmente transparentes, podem ser substituidos pelos valores do seu resultado e não mudam o comportamento do programa.

const Hr = () => {
return <hr className="hr" />;
}
const _ref = <hr className="hr" />;const Hr = () => {
return _ref;
};
  • Diminui a chamada ao React.createElement e consequentemente diminui a alocação de memória.

Componentes React inline

O segundo otimizador proposto pelo Facebook, para substituir o React.createElement em produção usando o babelHelpers.jsx.

<Baz foo="bar" key="1" />;
babelHelpers.jsx(Baz, {
foo: 'bar'
}, '1');
/**
* Ao invés de:
*
* React.createElement(Baz, {
* foo: 'bar',
* key: '1',
* });
*/
// Propriedades restantes são adicionadas a nova props
for (propName in config) {
if (config.hasOwnProperty(propName) &&
!RESERVED_PROPS.hasOwnProperty(propName)) {
props[propName] = config[propName];
}
}
<Navbar.Header />

Removendo propTypes

Olhando nas transformações anteriores, logo pensamos se não podemos remover os propTypes em produção. Assim que usarmos node_nev = “production”, todas as propTypes se tornam código morto.

const Baz = () => (
<div />
);
Baz.propTypes = {
foo: React.PropTypes.string
};
const Baz = () => (
<div />
);

Analisando tudo isso de verdade

Usar plugins e presets sem analisar o resultado em produção é como atirar no escuro. Não faça isso!


react-addons-perf

A primeira ferramenta que podemos usar para analisar a otimização é criada pelo próprio Facebook: react-addons-perf. É uma ferramenta bem conveniente de usar e que mede o tempo gasto por cada componente. No nosso caso, vamos renderizar 50 vezes o calendário com algo em torno de 500 eventos. Durante isso, vamos usar o react-addons-perf para medir o tempo gasto. A seguir os resultados (quanto menor, melhor):

benchmark.js

A segunda ferramenta que uso para analisa, não depende do React e pode ser usada em qualquer aplicação JavaScript, chama-se benchmark.js. A idéia é a mesma, vamos renderizar a aplicação 100 vezes agora. A seguir os resultados:


Para finalizar

Eu realmente recomendo você utilizar e analisar o uso desses pacotes de otimizações. Nós já estamos divulgando a palavra na comunidade: spectacle, react-redux-starter-kit, react-starter-kit, react-redux-universal-hot-example.


Créditos


Coletividad

Uma plataforma de Educação. Uma Comunidade de quem cria, aprende e ensina Design, Tecnologia e Inovação. Cursos, visitas, eventos, meetups, workshops, debates, palestras, formações, conteúdos, hackathons e bootcamps.

Eduardo Rabelo

Written by

☕🇳🇿 - https://eduardorabelo.me

Coletividad

Uma plataforma de Educação. Uma Comunidade de quem cria, aprende e ensina Design, Tecnologia e Inovação. Cursos, visitas, eventos, meetups, workshops, debates, palestras, formações, conteúdos, hackathons e bootcamps.