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:

Tree shaking

In computing, tree shaking is a dead code elimination technique that is applied when optimizing code. Often contrasted with traditional single-library dead code elimination techniques common to minifiers, tree shaking eliminates unused functions from across the bundle by starting at the entry point and only including functions that may be executed. It is succinctly described as "live code inclusion".

View on Wikipedia>

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 instalado vamos criar uma nova aplicação:

vue create tree-shaking && cd tree-shaking && yarn build

Agora vamos instalar o Lodash em nossa aplicação

yarn add lodash

E adicioná-lo ao nosso arquivo main.js

Pronto, agora é só buildar:

yarn build

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

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'

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 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!!!