アートワーク: https://code-art.pictures/

なぜわざわざ？

最近では驚くべきことかもしれませんが、インターネット トラフィックは依然として多くのシナリオで問題となっています。モバイル ネットワークでは多くの場(chǎng)合、データ プランが制限されており、デバイスのバッテリーは無限ではなく、最も重要なことに、サイトの読み込みを待っている間のユーザーの注意力は限られています。だからこそバンドルのサイズが依然として重要なのです。ここでは、考慮すべき 7 つのヒントを紹介します。

1. ES5 にトランスパイルしない

2020 年、私はローカル ソーシャル ネットワークのプロモーション アプリをメンテナンスしていました。これは、ES5 を?qū)澫螭趣筏康湫偷膜?React TypeScript Webpack アプリケーションでした。 webpack 5 がリリースされたとき、私はアップグレードすることにしました。すべてが順調(diào)に進(jìn)みました。エラー分析とユーザーからのフィードバックを監(jiān)視しましたが、予想外のものは何もありませんでした。 1 週間後、自分のバンドルにアロー関數(shù)が含まれていることを偶然発見しました。それは新しい Webpack 機(jī)能でした。

ES5 の狀態(tài)に関する優(yōu)れた記事は次のとおりです。重要なポイント:

• 多くのライブラリにはすでに ES6 コードが含まれており、それらのバンドルは ES5 互換ではありません。
• 世界中で人気のあるサイトのほとんどは ES5 と互換性がありません。あなたのサイトにも ES5 は必要ないかもしれません。
• ES5 との互換性が依然として必要であることが確実な場(chǎng)合は、ビルド プロセスにライブラリを含める必要があります。

2. 最新の JavaScript 言語機(jī)能を理解し、使用する

より優(yōu)れた、よりコンパクトなコードを作成できる機(jī)能をいくつか紹介します。

2.1.発電機(jī)

ジェネレーターは、ネストされた構(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.プライベートクラスフィールド

ミニファイヤは、エクスポートされたオブジェクトであっても、これらのフィールドが外部で使用できないことを確実に認(rèn)識(shí)しており、名前を自由に短縮できます。

ソース

export class A {
  #myFancyStateObject
}

バンドル

export class A{#t}

もちろん、これは TypeScript のプライベート フィールドでは機(jī)能しません。tsc がその仕事を終えると、プライベート フィールドであるという知識(shí)が消えるからです。

2.3.最新の API

Promise.withResolvers() または Map.groupBy() について聞いたことがありますか?これらの API は、この記事の執(zhí)筆時(shí)點(diǎn)では広く利用可能になっていませんが、間もなく利用可能になる予定です。今すぐ時(shí)間をかけてそれらを理解し、數(shù)年後にそれらを採(cǎi)用できるように準(zhǔn)備してください。

ヒント: 新しい JavaScript API を見つける方法

ブログやポッドキャストは無數(shù)にありますが、最も優(yōu)れた「ニュースレター」は TypeScript リポジトリ內(nèi)の新しい .d.ts ファイルであると思います。たとえば、es2024.collection.d.ts を開いて、お楽しみください ?

3. コードの重複を避ける

繰り返されるパターンに気づきましたか?

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

コードを繰り返すと、バンドルのサイズが大きくなるだけでなく、各部分の動(dòng)作を理解しにくくなります。これにより、開発者は既存のユーティリティ関數(shù)を特定して再利用する代わりに新しいコードを作成することになり、バンドルがさらに肥大化します。

このトピックに関する優(yōu)れた資料はすでに豊富にあるので、それを再説明するのではなく、Martin Fowler による古典的な リファクタリング をお?jiǎng)幛幛筏蓼?。上記のような単純な例だけでなく、階層の結(jié)合やデザインの繰り返しなどの複雑なケースもカバーしています。

それでは、小さな例を改良してみましょう。クランプはパラメーターを配列インデックスの範(fàn)囲に制限するためによく使用されるようです。そのため、ショートカットを作成できます:

export class A {
  #myFancyStateObject
}

この変更により、n はおそらく整數(shù)であることが意図されていることが明示されますが、現(xiàn)在はチェックされていません。また、未処理の特殊なケースである空の配列も強(qiáng)調(diào)しています。この小さな重複排除を行うことで、2 つの潛在的なバグも発見しました?

4. オーバーエンジニアリングを避ける

このことわざの正確な出典は覚えていませんが、的を射ていると思います:

オーバーエンジニアリングとは、自分が抱えていない問題を解決することです。

Web 開発の世界では、主に 2 つのタイプのオーバーエンジニアリングを観察しました。

4.1.過度の一般化

このコードを考えてみましょう。パディングは 4px の倍數(shù)で、背景色は青の色合いです。これはおそらく偶然ではなく、偶然であれば重複の可能性を示している可能性があります。しかし、本當(dāng)に汎用 Button コンポーネントを抽出するのに十分な情報(bào)があるのでしょうか? それともオーバーエンジニアリングなのでしょうか?

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)

このアドバイスは「重複を避ける」と多少矛盾します。コードの過剰な重複排除はオーバーエンジニアリングにつながる可能性があります。では、どこで線を引くのでしょうか？私は個(gè)人的に、魔法の數(shù)字「3」を使用しています。同様のパターンを持つ 3 つの場(chǎng)所を見つけたら、汎用コンポーネントを抽出する時(shí)期が來るかもしれません。

青いボタンの場(chǎng)合、新しいコンポーネントを作成するのではなく、少なくともパディングには CSS 変數(shù)を使用するのが最善の解決策だと思います。

4.2.不適切なフレームワークの使用

はい、私たちが大好きなもの、Next.js、React、Vue などについて話しています。アプリに DOM 要素レベルでの対話性があまり含まれていない場(chǎng)合、または動(dòng)的ではない場(chǎng)合、または非常に単純な場(chǎng)合は、他のオプションを検討してください。

• 靜的サイト ジェネレーター — いくつかの厳選されたリストから始めることができます。
  • 注意: 中には React やその他のフレームワークを內(nèi)部で使用しているものもあります。バンドルの最小化が目標(biāo)の場(chǎng)合は、別のことを試してください。
• WordPress などのコンテンツ管理システム。
• バニラ — 特に次の 2 つの場(chǎng)合に役立ちます。
  • アプリはとてもシンプルです。
  • アプリは DOM をあまり操作しませんが、代わりに、たとえばキャンバス上に何かを描畫します。まさにこれと同じようなプロジェクトがあります。

5. 時(shí)代遅れの TypeScript 機(jī)能を避ける

TypeScript の現(xiàn)在の目標(biāo)は主に JavaScript の型チェックですが、常にそうであったわけではありません。 ES6 以前の時(shí)代には、「より優(yōu)れた JavaScript」を作成しようとする試みが數(shù)多くあり、TypeScript も例外ではありませんでした。一部の機(jī)能はその初期に遡ります。

5.1.列挙型

適切に使用するのが難しいだけでなく、非常に冗長(zhǎng)な構(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 ハンドブックでは、列挙型の代わりに単純なオブジェクトを使用することを推奨しています。共用體型を考慮することもできます。

5.2.名前空間

ネームスペースは、ESM モジュール以前のソリューションでした。バンドルのサイズが大きくなるだけでなく、名前空間はグローバルであることが意図されているため、大規(guī)模なプロジェクトで名前の競(jì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 モジュールを使用します。

注: 名前空間は、グローバル ライブラリの型定義を記述する場(chǎng)合には依然として役立ちます。

6. 小さな最適化を無視しない

これらの小さなトリックのそれぞれにより、バンドル內(nèi)の數(shù)バイトから數(shù)十バイトを節(jié)約できます。一貫して適用すれば、目に見える結(jié)果をもたらすことができます。

6.1.真/偽のプロパティを使用する

たとえば、空の文字列は false です。それが定義されており、空でないことを確認(rèn)するには、次のように書くだけです:

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

6.2.場(chǎng)合によっては非厳密な比較を許可する

== を使用して null を未定義に強(qiáng)制したり、その逆を行うことは完全に正當(dāng)化されると信じています。

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

6.3.ヌル合體、論理和、およびデフォルトパラメータを使用してデフォルト値を置き換える

<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 = {}));

オブジェクトをフリーズして、そのプロパティを変更から保護(hù)することもできます。

7. バンドルを定期的に検査する

各バンドラーには、webpack の webpack-bundle-analyzer や Vite の vite-bundle-analyzer など、そのコンテンツを視覚化するツールがあります。次のようなツールは、バンドルに関する一般的な問題を特定するのに役立ちます:

• ライブラリが不釣り合いな量のスペースを占有します。移行またはアップグレードする時(shí)期が來たのでしょうか?
• プロジェクトのさまざまな部分で 2 つの類似したライブラリが使用されています。統(tǒng)合して 1 つだけを使用できますか?
• 大きなファイルがバンドル內(nèi)に存在しますが、ユーザーの 0.5% がアクセスするページ (ライセンス テキストなど) からのみアクセスされます。動(dòng)的 import() を使用してバンドルを分割できる可能性があります?

これらのツールに加えて、時(shí)々手動(dòng)でバンドルを読んで不規(guī)則性を見つけることをお?jiǎng)幛幛筏蓼埂￥郡趣à?、TypeScript の構(gòu)成ミスにより、ES6 バンドルに ES5 ヘルパーが含まれたり、ESM プロジェクトに CJS ヘルパーが含まれたりする可能性があります。これらの問題は自動(dòng)化ツールでは検出できない可能性がありますが、それでも読み込み時(shí)間が長(zhǎng)くなり、最も貴重な資産であるユーザーの注意が損なわれる可能性があります。

---

読んでいただきありがとうございます。コーディングを楽しんでください!

以上がJavaScript バンドルのサイズを最小限に抑えるための実踐的なヒントの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。