2 minutos com tremor de árvores Webpack e reexportação

Entrada

Deixe-me começar. Tínhamos uma interface monolítica com uma grande herança. Os serviços residiam nos mesmos arquivos com os componentes. Tudo estava misturado com o slogan na fachada: "Deixe tudo à mão - é mais fácil encontrar o que você precisa". E não importa se o tamanho do arquivo é de mais de 200, 300, 500 ou mais linhas de código.

Finalidade

Torne tudo mais legível, menor e mais rápido.

Implementação

Separar tudo o que é possível em arquivos e a bala de ouro aqui é o princípio de responsabilidade exclusiva. Se tivermos um componente e funções puras dentro de um arquivo, nós os separaremos.

Com o advento do ES6 +, tornou-se possível usar a importação ... da sintaxe - esse é um ótimo recurso, porque também podemos usar a exportação ... da .

Refatoração

Imagine um arquivo com esta estrutura:

// ,  ,       function multiply (a, b) { return a * b; } function sum (a, b) { return a + b; } function calculateSomethingSpecial(data) { return data.map( dataItem => sum(dataItem.param1, dataItem.param2) ); } 

Podemos dividir esse código em arquivos da seguinte maneira:

Estrutura:

 utils multiply.js sum.js calculateSomethingSpecial.js 

e arquivos:

 // multiply.js export default function multiply (a, b) { return a * b; } or const multiply (a, b) => a * b; //    –     . 

 // sum.js export default function sum (a, b) { return a + b; } 

 // calculateSomethingSpecial.js import sum from "./sum"; export default function calculateSomethingSpecial(data) { return data.map( dataItem => sum(dataItem.param1, dataItem.param2)); } 

Agora podemos importar as funções individualmente. Mas com linhas extras e esses nomes longos nas importações, ainda parece horrível.

 // App.js import multiply from '../utils/multiply'; import sum from '../utils/sum'; import calculateSomethingSpecial from '../utils/calculateSomethingSpecial'; ... 

Mas, para isso, temos um recurso maravilhoso que apareceu com o advento da nova sintaxe JS, chamada reexportação (reexportação). Na pasta, precisamos criar um arquivo index.js para combinar todas as nossas funções. E agora podemos reescrever nosso código desta maneira:

 // utils/index.js export { default as sum } from './sum'; export { default as multiply } from './multiply'; export { default as calculateSomethingSpecial } from './calculateSomethingSpecial'; 

Podshamanim App.js ligeiramente:

 // App.js import { multiply, sum, calculateSomethingSpecial } from '../utils'; 

Feito.

Teste.

Agora vamos verificar como nossas compilações Webpack são construídas para produção. Vamos criar um pequeno aplicativo React para testar como ele funciona. Verificaremos se baixamos apenas o que precisamos ou tudo o que é indicado no index.js da pasta utils .

 //  App.js import React from "react"; import ReactDOM from "react-dom"; import { sum } from "./utils"; import "./styles.css"; function App() { return ( <div className="App"> <h1>Re-export example</h1> <p>{sum(5, 10)}</p> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

Aplicação:

Versão de produção do aplicativo:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, t) { "use strict"; tr(n); //    **sum**   var r = t(0) , a = tn(r) , c = t(2) , o = tn(c); function l(e, n) { return e + n } t(9); var u = document.getElementById("root"); oarender(aacreateElement(function() { return aacreateElement("div", { className: "App" }, aacreateElement("h1", null, "Re-export example"), aacreateElement("p", null, l(5, 10))) }, null), u) }, 3: function(e, n, t) { e.exports = t(10) }, 9: function(e, n, t) {} }, [[3, 1, 2]]]); //# sourceMappingURL=main.e2563e9c.chunk.js.map 

Como você pode ver acima, nós carregamos apenas a função sum dos utils .
Vamos verificar novamente e, desta vez, usaremos a multiplicação .

Aplicação:

Versão de produção do aplicativo:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, t) { "use strict"; tr(n); var a = t(0) , r = tn(a) , c = t(2) , l = tn(c); t(9); var o = document.getElementById("root"); larender(racreateElement(function() { return racreateElement("div", { className: "App" //        React      }, racreateElement("h1", null, "Re-export example"), racreateElement("p", null, 50)) }, null), o) }, 3: function(e, n, t) { e.exports = t(10) }, 9: function(e, n, t) {} }, [[3, 1, 2]]]); //# sourceMappingURL=main.5db15096.chunk.js.map 

Aqui nem vemos as funções dentro do código, porque o Webpack compilou nosso valor antes mesmo da implantação.

Teste final

Então, vamos executar nosso teste final e usar todos os recursos de uma só vez para ver se tudo funciona.

 //  App.js import React from "react"; import ReactDOM from "react-dom"; import { multiply, sum, calculateSomethingSpecial } from "./utils"; import "./styles.css"; function App() { const specialData = [ { param1: 100, param2: 99 }, { param1: 2, param2: 31 } ]; const special = calculateSomethingSpecial(specialData); return ( <div className="App"> <h1>Re-export example</h1> <p>Special: </p> <div> {special.map((specialItem, index) => ( <div key={index}> Result #{index} {specialItem} </div> ))} </div> <p>{multiply(5, 10)}</p> <p>{sum(5, 10)}</p> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

Aplicação:

Versão de produção do aplicativo:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, a) { "use strict"; ar(n); var t = a(0) , r = an(t) , l = a(2) , p = an(l); //    **sum** function c(e, n) { return e + n } a(9); var u = document.getElementById("root"); parender(racreateElement(function() { var e = [{ param1: 100, param2: 99 }, { param1: 2, param2: 31 //      **calculateSomethingSpecial** }].map(function(e) { //    **sum**   return c(e.param1, e.param2) }); return racreateElement("div", { className: "App" }, racreateElement("h1", null, "Re-export example"), racreateElement("p", null, "Special: "), racreateElement("div", null, e.map(function(e, n) { return racreateElement("div", { key: n }, "Result #", n, " ", e) //     **multiply** })), racreateElement("p", null, 50), //     **sum**   racreateElement("p", null, c(5, 10))) }, null), u) }, 3: function(e, n, a) { e.exports = a(10) }, 9: function(e, n, a) {} }, [[3, 1, 2]]]); vie 

Ótimo! Tudo funciona como esperado. Você pode tentar qualquer etapa usando o link para codesandbox e sempre pode implantar diretamente para netlify a partir daí.

Conclusão

Use a separação do código em partes menores, tente se livrar de arquivos, funções e componentes muito complexos. Você ajudará o futuro você e sua equipe. Arquivos menores são mais rápidos de ler, mais fáceis de entender, mais fáceis de manter, mais rápidos para compilar, mais fáceis de armazenar em cache, mais rápidos de baixar etc.

Obrigado pela leitura! Código limpo e refatoração deliciosa!