2 menit dengan goyangan pohon Webpack dan ekspor kembali

Entri

Biarkan saya mulai. Kami memiliki frontend monolitik dengan warisan besar. Layanan hidup dalam file yang sama dengan komponen. Semuanya dicampuradukkan dengan slogan di fasad: "Biarkan semuanya ada di tangan - lebih mudah untuk menemukan apa yang Anda butuhkan." Dan tidak masalah bahwa panjang file adalah 200+, 300+, 500+ atau bahkan lebih banyak baris kode.

Tujuan

Jadikan semuanya lebih mudah dibaca, lebih kecil dan lebih cepat.

Implementasi

Memisahkan segala sesuatu yang mungkin menjadi file dan peluru emas di sini adalah prinsip tanggung jawab tunggal. Jika kita memiliki komponen dan fungsi murni di dalam file, kita akan memisahkannya.

Dengan munculnya ES6 +, menjadi mungkin untuk menggunakan impor ... dari sintaks - ini adalah fitur yang hebat, karena kita juga dapat menggunakan ekspor ... dari .

Refactoring

Bayangkan file dengan struktur ini:

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

Kami dapat membagi kode ini menjadi file dengan cara ini:

Struktur:

 utils multiply.js sum.js calculateSomethingSpecial.js 

dan file:

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

Sekarang kita dapat mengimpor fungsi secara individual. Tetapi dengan garis tambahan dan nama-nama panjang ini di impor, masih terlihat mengerikan.

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

Tetapi untuk ini kami memiliki fitur luar biasa yang muncul dengan munculnya sintaks JS baru, yang disebut re-ekspor (re-ekspor). Dalam folder tersebut, kita perlu membuat file index.js untuk menggabungkan semua fungsi kita. Dan sekarang kita dapat menulis ulang kode kita dengan cara ini:

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

Sedikit podshamanim App.js:

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

Selesai

Pengujian.

Sekarang mari kita periksa bagaimana kompilasi Webpack kami membangun untuk produksi. Mari kita buat aplikasi Bereaksi kecil untuk menguji cara kerjanya. Kami akan memeriksa apakah kami hanya mengunduh apa yang kami butuhkan, atau semua yang ditunjukkan dalam index.js dari folder 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); 

Aplikasi:

Versi produksi aplikasi:

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

Seperti yang Anda lihat di atas, kami hanya memuat fungsi penjumlahan dari utils .
Mari kita periksa lagi, dan kali ini kita akan menggunakan multiply .

Aplikasi:

Versi produksi aplikasi:

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

Di sini kita bahkan tidak melihat fungsi-fungsi di dalam kode, karena Webpack mengkompilasi nilai kita bahkan sebelum penyebaran.

Tes akhir

Jadi, mari kita jalankan tes akhir kami dan gunakan semua fitur sekaligus untuk melihat apakah semuanya berfungsi.

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

Aplikasi:

Versi produksi aplikasi:

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

Hebat! Semuanya berfungsi seperti yang diharapkan. Anda dapat mencoba langkah apa pun hanya dengan menggunakan tautan ke kode dan kotak , dan Anda selalu dapat menggunakan langsung untuk menjaring dari sana.

Kesimpulan

Gunakan pemisahan kode menjadi bagian-bagian yang lebih kecil, cobalah untuk menyingkirkan file, fungsi, komponen yang terlalu rumit. Anda akan membantu masa depan Anda sendiri dan tim Anda. File yang lebih kecil lebih cepat dibaca, lebih mudah dipahami, lebih mudah dirawat, lebih cepat dikompilasi, lebih mudah di-cache, lebih cepat diunduh, dll.

Terima kasih sudah membaca! Kode bersih dan refactoring lezat!