2 minutos con Webpack sacudiendo árboles y reexportando

Entrada

Déjame empezar Teníamos una interfaz monolítica con una gran herencia. Los servicios vivían en los mismos archivos con los componentes. Todo estaba mezclado con el eslogan en la fachada: "Deje todo a mano, es más fácil encontrar lo que necesita". Y no importa que la longitud del archivo sea de más de 200, más de 300, más de 500 o incluso más líneas de código.

Propósito

Haga que todo sea más legible, más pequeño y más rápido.

Implementación

Separar todo lo que es posible en archivos y la bala de oro aquí es el principio de responsabilidad exclusiva. Si tenemos un componente y funciones puras dentro de un archivo, las separaremos.

Con la llegada de ES6 +, se hizo posible usar la importación ... desde la sintaxis; esta es una gran característica, porque también podemos usar la exportación ... desde .

Refactorización

Imagine un archivo con esta estructura:

// ,  ,       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 este código en archivos de esta manera:

Estructura:

 utils multiply.js sum.js calculateSomethingSpecial.js 

y archivos:

 // 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)); } 

Ahora podemos importar las funciones individualmente. Pero con líneas adicionales y estos nombres largos en las importaciones, todavía se ve horrible.

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

Pero para esto tenemos una característica maravillosa que apareció con el advenimiento de la nueva sintaxis JS, que se llama reexportación (reexportación). En la carpeta, necesitamos hacer un archivo index.js para combinar todas nuestras funciones. Y ahora podemos reescribir nuestro código de esta manera:

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

Ligeramente podshamanim App.js:

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

Listo

Pruebas

Ahora veamos cómo compila nuestro Webpack compilación para producción. Creemos una pequeña aplicación React para probar cómo funciona. Verificaremos si descargamos solo lo que necesitamos, o todo lo que se indica en index.js desde la carpeta 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); 

Aplicación:

Versión de producción de la aplicación:

 //   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 puede ver arriba, solo cargamos la función sum de utils .
Revisemos nuevamente, y esta vez usaremos multiplicar .

Aplicación:

Versión de producción de la aplicación:

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

Aquí ni siquiera vemos las funciones dentro del código, porque Webpack compiló nuestro valor incluso antes de la implementación.

Prueba final

Entonces, ejecutemos nuestra prueba final y usemos todas las funciones a la vez para ver si todo 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); 

Aplicación:

Versión de producción de la aplicación:

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

Genial Todo funciona como se esperaba. Puede intentar cualquier paso simplemente usando el enlace a codesandbox , y siempre puede implementar directamente para netlify desde allí.

Conclusión

Use la separación del código en partes más pequeñas, intente deshacerse de archivos, funciones y componentes demasiado complejos. Ayudará tanto al futuro usted como a su equipo. Los archivos más pequeños son más rápidos de leer, más fáciles de entender, más fáciles de mantener, más rápidos de compilar, más fáciles de almacenar en caché, más rápidos de descargar, etc.

Gracias por leer! ¡Código limpio y refactorización deliciosa!