2 minutes with Webpack tree-shaking and re-export

Introduction

Let me get started. We had a solid front-end with a great legacy. Services lived in the same files with the components. Everything was mixed up with the slogan on the facade: “Let everything be at hand - it's easier to find what you need.” And it doesn't matter that the file length is 200+, 300+, 500+ or ​​even more lines of code.

purpose

Make everything readable, smaller and faster.

Implementation

To divide everything that is possible into files and a golden bullet here is the principle of sole responsibility. If we have a component and pure functions inside the file, we will separate them.

With the advent of ES6 +, it became possible to use import ... from syntax - this is a great feature, because we can also use export ... from .

Refactoring

Imagine a file with this structure:

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

We can divide this code into files like this:

Structure:

 utils multiply.js sum.js calculateSomethingSpecial.js 

and files:

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

Now we can import functions separately. But with the extra strings and these long import names, it still looks awful.

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

But for this we have a great piece, which appeared with the advent of the new syntax JS, which is called re-export (re-export). In the folder we need to make the index.js file in order to combine all our functions. And now we can rewrite our code like this:

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

Slightly podshamanim App.js:

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

Is done.

Testing.

Now let's check how our Webpack compiles the build for production. Let's create a small React application to check how everything works. Check whether we load only what we need, or all that is specified in the index.js folder in the 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); 

Application:

Production version of the application:

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

As you can see above, we only loaded the sum function from utils .
Let's check again, and this time we will use multiply .

Application:

Production version of the application:

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

Here we don’t even see the functions inside the code, because Webpack compiled our value before the deployment.

Final test

So let's do our last test and use all the functions at once to check if everything works.

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

Application:

Production version of the application:

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

Fine! Everything works as expected. You can try any stage, simply using the reference to codesandbox , and you can always deploy directly from there to netlify .

Conclusion

Use the division of the code into smaller parts, try to get rid of too complex files, functions, components. You will help and future yourself and your team. Smaller files are faster to read, easier to understand, easier to maintain, faster to compile, easier to cache, faster to load, etc.

Thanks for reading! Clean code and nice refactoring!