Webpack摇树和重新导出需要2分钟

参赛作品

让我开始。 我们拥有一个具有悠久历史的整体前端。 服务与组件位于同一文件中。 一切都与立面上的标语混合在一起：“让一切随手可得-更容易找到所需的内容。”文件长度为200 +，300 +，500 +甚至更多行的代码都没关系。

目的

使所有内容更具可读性，更小，更快。

实作

将所有可能的内容分离到文件中，这是唯一的责任原则。 如果文件中有组件和纯函数，则将它们分开。

随着ES6 +的出现，可以从语法中使用import ...-这是一个很棒的功能，因为我们还可以从中使用export...。

重构

想象一个具有以下结构的文件：

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

我们可以通过以下方式将此代码拆分为文件：

结构：

 utils multiply.js sum.js calculateSomethingSpecial.js 

和文件：

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

现在，我们可以分别导入功能。 但是，由于有多余的行和导入中的这些长名称，它看起来仍然很糟糕。

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

但是为此，随着新的JS语法的出现，我们有了一个很棒的功能，称为重新导出（re-export）。 在文件夹中，我们需要制作一个index.js文件，以便结合所有功能。 现在我们可以这样重写代码：

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

稍微podshamanim App.js：

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

做完了

测试。

现在，让我们检查一下Webpack如何为生产而编译。 让我们创建一个小的React应用程序以测试其工作方式。 我们将检查是否仅下载所需内容，还是从utils文件夹中下载index.js中指示的所有内容。

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

应用范围：

应用程序的生产版本：

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

如上所示，我们仅从utils加载sum函数。
让我们再次检查，这次我们将使用乘法 。

应用范围：

应用程序的生产版本：

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

在这里，我们甚至看不到代码中的功能，因为Webpack甚至在部署之前就已经编译了我们的值。

期末考试

因此，让我们运行最终测试并立即使用所有功能，看看一切是否正常。

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

应用范围：

应用程序的生产版本：

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

太好了！ 一切正常。 您只需通过使用codesandbox的链接即可尝试任何步骤，并且始终可以直接从那里进行部署以进行netlify 。

结论

将代码分成较小的部分，尝试摆脱过于复杂的文件，函数，组件。 您将为自己和团队的未来提供帮助。 较小的文件读取速度更快，更易于理解，易于维护，编译速度更快，更易于缓存，下载速度更快等。

感谢您的阅读！ 干净的代码和甜美的重构！