DEV Community: Rai Siqueira

Dev vocabulary: What is tree shaking 🌲

Rai Siqueira — Sun, 17 May 2020 03:43:16 +0000

Originally posted on: https://raisiqueira.dev/blog/2020-05-17-what-is-tree-shaking.

We are used to using modules in JavaScript (aka esm)
since ES6 (or ES2015) ECMAScript modules are the official standard format for packing JavaScript code for reuse. In applications with multiple modules it's constant to have functions, methods, variables and many others pieces of code not used in our apps.

The tree shaking term in the JavaScript world refers to dead-code elimination from our application, the name became popular with Rollup — an ES2015 module bundler. Tree shaking is a technique that statically analyzes the code that is imported from some module and during the bundle removes unused codes. This step is very important when we are going to prepare a production build, generating smaller files.

Tools like Webpack or the Rollup mentioned above detect these codes that are not being used in the application and remove them from the package generated.

Nice, but what is actually considered a dead code?

This answer is simple, we will use the Webpack as module bundle in our exemple, it is the code that Webpack does not see you using around the application, it’ll follow the trail of imports and exports throughout our app, if it finds any imported module that does not being used in the module that imported it, the Webpack will consider it as “dead code”.

Let’s see an example 😬

// module-01.ts
export function sum(a: number, b: number): number {
  return a + b
}

export function minus(a: number, b: number): number {
  return a - b
}

// main-module.ts
import { sum, minus } from './module-01'

const main = () => {
  console.log(sum(2 + 2))
}

main()

In the example above, the function minus was not executed in the code, just imported, which means that, this will not be in our final bundle, the same happens with properties of objects that are not used, see the example below:

// person.ts
export const person = {
  name: 'Rai Siqueira',
  birthday: '2 december',
}

// main.ts
import { person } from './person'

console.log(person.name)

In the example above, the birthday property is not accessed, so it will be removed from our final bundle.

Tree shaking only works with import and export syntax, so it doesn’t work with the syntax used in modules of the CommonJS type (using require syntax). The above examples also apply to dependencies that we download from NPM, a practical example of this is when using Lodash.

import map from 'lodash/map'

The code snippet above will only add the Lodash map function to our build, not Lodash entirely. Using the tree shaking technique and eliminating dead code can significantly reduce the size of the code we have in our application.

Another technique that we can use is using the website BundlePhobia, which brings several details of a package published in NPM, such as the subject of this article - tree shaking.

Example of a package with tree shaking support (note the tree icon below the package name):

Example of a package without tree shaking support (without the tree icon below the package name):

We can improve the identification of dead code using lint tools, for example ESLint or TSLint. I’ll indicate the ESLint Plugin unused imports
eslint-plugin-unused-imports - npm that will help you to identify unnecessary imports when you are coding.

Well, I hope I helped you to demystify this term that we hear a lot when we are using modules in JavaScript.

Did you find something wrong in the text? Click on the "edit on GitHub" link after the references. This is my first text in English, all feedback is welcome.

References:

Debug de componentes Angular com window.ng no Angular 9

Rai Siqueira — Thu, 26 Dec 2019 23:36:16 +0000

Com a versão 9 do Angular prestes a sair, temos algumas novas features que vão nos ajudar a desenvolver nossas aplicações e também a debugar-las de maneira certa, e uma dessas novidades é o objeto global window.ng.

`window.ng`

Com o window.ng conseguimos ter acesso direto a Diretivas, Componentes entre outras features do Angular direto do console do browser, tudo isso com o Angular 9 e a nova api do Ivy.

Para fazer nosso teste vamos precisar na última RC do Angular (9.0.0-rc.7 até o momento deste post). Vamos criar um novo projeto com Angular 9:

npx @angular/cli@next new ng-console

Conhecendo a nova API do `window.ng`

Ok, com nosso projeto rodando vamos conhecer como que a api do window.ng funciona com alguns exemplos, o primeiro e o mais importante é o ng.getComponent().

Com o nosso componente criado, vamos atualizar o valor do atributo title do nosso componente, para isso precisamos acessar o HTMLElement do componente, para isso vamos usar a função do Chrome $(selector) e armazenar em uma variável, el. A função ng.getComponent() recebe um elemento, neste caso vamos usar o elemento que está armazenado na variável el, com isso já conseguimos atualizar o valor do atributo title do nosso componente.

// armazena o elemento em uma variável
const el = $('app-root');
// invoca a função getComponent() passando o elemento armazenado
const c = ng.getComponent(el);
// atualiza o valor do atributo title do componente
c.title = 'Hey new ng api!!!';
// invoca o change detector do Angular
ng.markDirty(el);

Exemplo:

Casos de uso para o `ng.getComponent()`

Acessar um service injetado no componente e disparar algum método do mesmo manualmente e acessar os valores via console;
Fazer um subscribe em algum Observable e emitir o valor também no console;
Acessar algum método do próprio componente e analisar se o comportamento está como esperado.

`ng.markDirty()`

Você deve ter notado que no final do último exemplo usamos o método markDirty(). Essa função é importante ao debugar usando o console, ela é responsável por chamar a API de change detector do Angular e fazer as devidas alterações no componente especificado, mais uma vez vamos usar o nosso exemplo:

// armazena o elemento em uma variável
const el = $('app-root');
// invoca a função getComponent() passando o elemento armazenado
const c = ng.getComponent(el);
// atualiza o valor do atributo title do componente
c.title = 'Hey new ng api!!!';
// invoca o change detector do Angular
ng.markDirty(el);

Ao invocar o o markDirty() nos estamos dizendo ao Angular para atualizar o estado do componente, com isso podemos especificar uma instância de algum componente e acionar o change detector.

Conclusão

Com a nova API vamos interagir rapidamente com os componentes e testar as coisas sem precisar ir e voltar entre o editor e o navegador, com isso novas extensões de desenvolvimento podem ser desenvolvidas sobre essas APIs para facilitar ainda mais nossa vida. 🥳

DEV Community: Rai Siqueira

Dev vocabulary: What is tree shaking 🌲

Nice, but what is actually considered a dead code?

Debug de componentes Angular com window.ng no Angular 9

window.ng

Conhecendo a nova API do window.ng

Casos de uso para o ng.getComponent()

ng.markDirty()

Conclusão

`window.ng`

Conhecendo a nova API do `window.ng`

Casos de uso para o `ng.getComponent()`

`ng.markDirty()`