作品：https://code-art.pictures/

為什么要麻煩？

現(xiàn)在可能會令人驚訝，但在許多情況下互聯(lián)網(wǎng)流量仍然是一個問題。移動網(wǎng)絡(luò)的數(shù)據(jù)套餐通常有限，設(shè)備電池也不是無限的，最重要的是，用戶在等待網(wǎng)站加載時的注意力也是有限的。這就是為什么捆綁包大小仍然很重要。這里有七個建議供您考慮。

1. 不要轉(zhuǎn)換為 ES5

2020 年，我正在為本地社交網(wǎng)絡(luò)維護(hù)一個促銷應(yīng)用程序。這是一個典型的針對 ES5 的 React TypeScript Webpack 應(yīng)用程序。當(dāng) webpack 5 發(fā)布時，我決定升級。一切都很順利；我監(jiān)控了錯誤分析和用戶反饋，沒有什么意外的。一周后，我意外地發(fā)現(xiàn)我的包中包含了箭頭函數(shù)——這是一個新的 webpack 功能。

這是一篇關(guān)于 ES5 狀態(tài)的精彩文章。要點(diǎn)：

• 許多庫已經(jīng)包含 ES6 代碼，這意味著它們的捆綁包不兼容 ES5。
• 世界上大多數(shù)流行的網(wǎng)站都不兼容 ES5 — 您的網(wǎng)站可能也不需要它。
• 如果您確定仍然需要 ES5 兼容性，則必須在構(gòu)建過程中包含這些庫。

2.了解并使用現(xiàn)代 JavaScript 語言特性

這里有一些功能，可以讓您編寫更好、更緊湊的代碼。

2.1.發(fā)電機(jī)

生成器是遍歷嵌套結(jié)構(gòu)的有效方法：

type TreeNode<T> = {
    left?: TreeNode<T>
    value: T
    right?: TreeNode<T>
};

function* traverse<T>(root: TreeNode<T>): Generator<T> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}

2.2.私有類字段

壓縮器確信這些字段不能有外部用途，即使在導(dǎo)出的對象中也是如此，并且可以自由縮短它們的名稱。

來源

export class A {
  #myFancyStateObject
}

捆綁包

export class A{#t}

當(dāng)然，對于 TypeScript 私有字段來說，這不起作用，因?yàn)橐坏?tsc 完成其工作，它們是私有的這一知識就會消失。

2.3.現(xiàn)代 API

你聽說過 Promise.withResolvers() 或 Map.groupBy() 嗎？在撰寫本文時，這些 API 尚未廣泛使用，但很快就會廣泛使用?，F(xiàn)在花點(diǎn)時間熟悉它們，并準(zhǔn)備好在幾年后采用它們。

提示：如何發(fā)現(xiàn)新的 JavaScript API

有無數(shù)的博客和播客，但我發(fā)現(xiàn)最好的“新聞通訊”是 TypeScript 存儲庫中的新 .d.ts 文件。例如，只需打開 es2024.collection.d.ts 即可享受？

3. 避免代碼重復(fù)

你注意到重復(fù)的模式了嗎？

type TreeNode<T> = {
    left?: TreeNode<T>
    value: T
    right?: TreeNode<T>
};

function* traverse<T>(root: TreeNode<T>): Generator<T> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}

重復(fù)的代碼不僅增加了包的大小，而且還使理解每個部分的作用變得更加困難。這通常會導(dǎo)致開發(fā)人員編寫新代碼，而不是識別和重用現(xiàn)有的實(shí)用函數(shù)，從而進(jìn)一步使捆綁包變得臃腫。

關(guān)于這個主題已經(jīng)有很多優(yōu)秀的材料，所以我不再重述它，而是推薦經(jīng)典：Martin Fowler 的重構(gòu)。它不僅涵蓋了上面的簡單示例，還涵蓋了耦合層次結(jié)構(gòu)和重復(fù)設(shè)計等復(fù)雜情況。

現(xiàn)在，讓我們改進(jìn)我們的小例子。看來clamp經(jīng)常用于將參數(shù)限制在數(shù)組索引范圍內(nèi)，所以我們可以創(chuàng)建一個快捷方式：

export class A {
  #myFancyStateObject
}

此更改明確表明 n 可能是一個整數(shù)，目前尚未檢查。它還突出顯示了一個未處理的邊緣情況：空數(shù)組。通過進(jìn)行這個小的重復(fù)數(shù)據(jù)刪除，我們還發(fā)現(xiàn)了兩個潛在的錯誤？

4.避免過度設(shè)計

我不記得這句話的確切來源，但我認(rèn)為它是正確的：

過度設(shè)計正在解決你沒有的問題。

在 Web 開發(fā)領(lǐng)域，我觀察到兩種主要類型的過度設(shè)計。

4.1.過度概括

考慮這段代碼。內(nèi)邊距是 4px 的倍數(shù)，背景顏色是藍(lán)色陰影。這可能不是巧合，如果是這樣，則可能表明可能存在重復(fù)。但是我們真的有足夠的信息來提取通用 Button 組件，還是我們過度設(shè)計了？

CSS

export class A{#t}

JSX

const clamp = (min, val, max) =>
  Math.max(min, Math.min(val, max))
const x = clamp(0, v1, a.length - 1)
const y = clamp(0, v2, b.length - 1)
const z = clamp(0, v3, c.length - 1)

這個建議確實(shí)與“避免重復(fù)”有些沖突。過度重復(fù)代碼刪除可能會導(dǎo)致過度設(shè)計。那么，你在哪里劃清界限呢？就我個人而言，我使用神奇的數(shù)字“3”：一旦我看到三個具有相似模式的地方，可能是時候提取通用組件了。

對于我們的藍(lán)色按鈕，我相信最好的解決方案是使用 CSS 變量，至少用于填充，而不是創(chuàng)建一個新組件。

4.2.使用不正確的框架

是的，我說的是我們喜歡的東西——Next.js、React、Vue 等等。如果您的應(yīng)用程序在 DOM 元素級別不涉及大量交互性，或者不是動態(tài)的，或者非常簡單，請考慮其他選項(xiàng)：

• 靜態(tài)站點(diǎn)生成器 - 您可以從一些精選列表開始。
  • 注意：其中一些在幕后使用 React 或其他框架。如果您的目標(biāo)是捆綁最小化，請嘗試不同的方法。
• 內(nèi)容管理系統(tǒng)，例如 WordPress。
• Vanilla — 在兩種情況下特別有用：
  • 該應(yīng)用程序非常簡單。
  • 該應(yīng)用程序不會操作太多 DOM，而是在畫布上繪制一些東西。我有一個與此完全相同的項(xiàng)目。

5. 避免過時的 TypeScript 功能

TypeScript 當(dāng)前的目標(biāo)主要是對 JavaScript 進(jìn)行類型檢查，但情況并非總是如此。早在 ES6 出現(xiàn)之前，人們就曾多次嘗試創(chuàng)建“更好的 JavaScript”，TypeScript 也不例外。有些功能可以追溯到早期。

5.1.枚舉

它們不僅難以正確使用，而且還會轉(zhuǎn)換成相當(dāng)冗長的結(jié)構(gòu)：

TypeScript

type TreeNode<T> = {
    left?: TreeNode<T>
    value: T
    right?: TreeNode<T>
};

function* traverse<T>(root: TreeNode<T>): Generator<T> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}

JavaScript

export class A {
  #myFancyStateObject
}

官方 TypeScript 手冊建議使用簡單對象而不是枚舉。您也可以考慮聯(lián)合類型。

5.2.命名空間

命名空間是 ESM 之前的模塊解決方案。它們不僅增加了包的大小，而且由于命名空間是全局的，因此在大型項(xiàng)目中很難避免命名沖突。

TypeScript

export class A{#t}

JavaScript

const clamp = (min, val, max) =>
  Math.max(min, Math.min(val, max))
const x = clamp(0, v1, a.length - 1)
const y = clamp(0, v2, b.length - 1)
const z = clamp(0, v3, c.length - 1)

使用 ES 模塊代替命名空間。

注意：但是，對于為全局庫編寫類型定義，命名空間仍然有用。

6. 不要忽視小的優(yōu)化

這些小技巧中的每一個都可以為您節(jié)省捆綁中的幾個到幾十個字節(jié)。如果堅持使用，可以帶來明顯的效果。

6.1.使用真/假屬性

例如，空字符串是假的。要檢查它是否已定義且非空，您可以簡單地編寫：

const clampToRange = (n, {length}) =>
  clamp(0, n, length - 1)
const x = clampToRange(v1, a)
// ...

6.2.有時允許非嚴(yán)格比較

我相信使用 == 強(qiáng)制 null 為 undefined，反之亦然，是完全合理的。

.btn-a {
    background-color: skyblue;
    padding: 4px;
}
.btn-b {
    background-color: deepskyblue;
    padding: 8px;
}

6.3.使用空合并、邏輯或和默認(rèn)參數(shù)來替換默認(rèn)值

<button className='btn-a' onClick={handleClick}>
    Show
</button>
// ...
<button className='btn-b' onClick={handleSubmit}>
    Submit
</button>

6.4.使用單行箭頭函數(shù)

而不是這個：

enum A {
  x, y
}

寫下：

var A;
(function (A) {
    A[A["x"] = 0] = "x";
    A[A["y"] = 1] = "y";
})(A || (A = {}));

6.5.不要對非常簡單的對象使用類

而不是這個：

namespace A {
  export let x = 1
}

寫下：

var A;
(function (A) {
    A.x = 1;
})(A || (A = {}));

您還可以凍結(jié)對象以保護(hù)其屬性免遭更改。

7.定期檢查捆綁包

對于每個捆綁器，都有可視化其內(nèi)容的工具，例如用于 webpack 的 webpack-bundle-analyzer 和用于 Vite 的 vite-bundle-analyzer。這些工具可以幫助您識別捆綁包的常見問題：

• 庫占用了不成比例的空間 — 也許是時候遷移或升級了？
• 項(xiàng)目的不同部分使用了兩個相似的庫 - 您可以合并并僅使用一個嗎？
• 您的捆綁包中存在一個大文件，但只能由 0.5% 用戶訪問的頁面訪問（例如許可證文本）——也許您可以使用動態(tài) import() 對捆綁包進(jìn)行分區(qū)？

除了這些工具之外，偶爾手動閱讀捆綁包以發(fā)現(xiàn)違規(guī)行為也是一個好主意。例如，由于 TypeScript 配置錯誤，您可能會在 ES6 捆綁包中找到 ES5 幫助程序，或在 ESM 項(xiàng)目中找到 CJS 幫助程序。這些問題可能無法被自動化工具發(fā)現(xiàn)，但仍然會增加加載時間，并可能會損失您最寶貴的資產(chǎn) - 用戶的注意力。

---

感謝您的閱讀?？鞓肪幋a！

以上是最小化 JavaScript 包大小的實(shí)用技巧的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！