Tree Shaking: como reduzir o tamanho das suas aplicações na prática
Tags: javascript, architecture, vue, discuss
Published: 2020-11-25 11:19:17

Mesmo com todas as ferramentas e técnicas existentes é comum ver aplicações, especialmente SPA, demorando para carregar e com o seu tamanho como gargalo.

Sabemos que uma SPA é um punhado de html, css e js, minificado e otimizado para ser pequeno proporcionando um carregamento rápido e uma única vez.

Estou falando do Tree Shaking. Mas afinal de contas o que é **Tree Shaking**?

Tree Shaking é uma técnica utilizada para remover código morto/não utilizado no momento do build da aplicação, porporcionando, as vezes, uma redução drástica no tamanho da aplicação.

Para mais detalhes:
{% wikipedia https://en.wikipedia.org/wiki/Tree_shaking %}

O **Webpack** e o **Rollup** contam com essa feature nativamente, então por que ainda assim se preocupar com isso?

Pois nem sempre o Tree Shaking é possível! Um contexto se faz necessário para que isso seja possível. A lib ou o package que está sendo importado precisa ser exportado como ECMAScript6 nos possibilita. Diferentemente do CommonJS, seu carregamento é estático, com isso mapear toda a árvore de exportação muito mais fácil, facilitando assim a identificação e remoção de código não utilizado.

Agora que você já sabe o que é Tree Shaking, vamos para a prática?

Com o [Vue-CLI](https://cli.vuejs.org/guide/installation.html) instalado vamos criar uma nova aplicação:

```bash
vue create tree-shaking && cd tree-shaking && yarn build
```
<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/f5fw7t06ilw3py2igvp0.png" alt="A Vue app after build"/>
  <figcaption>Depois do build podemos ver que 83KB são de libs e packages instalados.</figcaption>
</figure>

Agora vamos instalar o Lodash em nossa aplicação
```bash
yarn add lodash
```

E adicioná-lo ao nosso arquivo main.js 
{% gist https://gist.github.com/murilolopes/144fd980dc4eadf6bf854a66b342313c %}

Pronto, agora é só buildar:
```bash
yarn build
```
<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/1744twlrl4gsqmlq7w55.png" alt="A Vue app after build with Lodash"/>
  <figcaption>71.77KB a mais!</figcaption>
</figure>

Sem ao menos usar alguma das mais de 200 funções que o Lodash nos fornece.

Vamos tornar as coisas um pouco mais interessantes, pegando apenas a função `.flatten`

{% gist https://gist.github.com/murilolopes/22669a14c9cf624228cf23a55ff3c1d5 %}
<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/6jh2pbi0bt3baow8frc2.png"/>
  <figcaption>Incríveis 1.92 KB</figcaption>
</figure>

Agora que vimos acontecendo na prática vamos entender o que se passa. Como na própria documentação do Lodash diz, importar `'lodash'` trará a instalação completa(full build). Se optar por `'lodash/core'` trará apenas o principal(core) além de outras opções para retornar apenas uma categoria de funções como é o caso do `'lodash/array'`
<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/0562aql6yccqwb96w7qi.png"/>
  <figcaption>Opções de importação do Lodash</figcaption>
</figure>

Isso acontece pela forma como o código é exportado. Na opção de full build(pacote completo) é exportado em um objeto, todas as funções, já na categoria de array, traz apenas funções relacionadas a arrays.

Tree Shaking é uma tecnica simples mas subestimada! Acredito fortemente que toda escolha de lib ou framework deve ser levado em consideração se o mesmo fornece alguma opção de Tree Shaking.

Uso o [Vuetify](https://vuetifyjs.com/en/features/treeshaking/) e pessoalmente gosto da forma como ele nos provê o Tree Shaking, bem interessante de se usar!

Então é isso, espero ter ajudado de alguma forma e se não concordou com algo dito aqui ou até mesmo errei, please, fix me! Obrigado pela atenção e até a próxima!!!