JavaScript バンドルのサイズを削減し、パフォーマンスを向上させるための roven テクニック-jsチュートリアル-php.cn

roven Techniques to Reduce JavaScript Bundle Size and Boost Performance

ベストセラー作家として、アマゾンで私の本を探索することをお勧めします。 Medium で私をフォローしてサポートを示すことを忘れないでください。ありがとう！あなたのサポートは世界を意味します！

開発者として、高速で効率的な Web アプリケーションを作成するには、JavaScript バンドルのサイズを最適化することが重要であることを学びました。長年にわたって、私は一貫して優れた結果を生み出すいくつかのテクニックを発見してきました。 JavaScript バンドルのサイズを削減するための 6 つの強力な方法について、私の経験と洞察を共有しましょう。

コード分割は、私の開発プロセスにおいて大きな変革をもたらしました。動的インポートを使用することで、JavaScript モジュールをオンデマンドでロードできるようになり、初期ロード時間が大幅に短縮されました。このアプローチは、複雑な機能セットを備えた大規模なアプリケーションに特に有益です。コード分割を実装する方法の例を次に示します:

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

ログイン後にコピー

この例では、重いモジュールはユーザーがボタンをクリックしたときにのみロードされ、初期バンドルサイズは小さく保たれます。

木を揺らすのも私がよく使うテクニックです。 ES6 モジュールと Webpack や Rollup などのビルドツールを活用することで、バンドルからデッドコードを削除できます。このプロセスにより、未使用のエクスポートが削除され、最終的なバンドルサイズが大幅に減少します。以下は、効果的なツリーシェイキングを可能にするコードの構造の簡単な例です:

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

ログイン後にコピー

この場合、ツリーシェークをサポートするツールとバンドルすると、unusedFunction は最終的なバンドルから除外されます。

縮小化は、私の最適化ツールキットの標準的な手法です。私は UglifyJS や Terser などのツールを使用して空白を削除し、変数名を短縮し、コードを最適化します。このプロセスにより、機能を変更することなくファイルサイズを大幅に削減できます。これは縮小化の前後の例です:

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

ログイン後にコピー

圧縮は、私が常に実装しているもう 1 つの重要なテクニックです。サーバー上で Gzip または Brotli 圧縮を有効にすることで、ファイル転送サイズを大幅に削減できます。これは通常、サーバーレベルで構成されます。たとえば、Apache .htaccess ファイルでは次のようになります。

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>

ログイン後にコピー

遅延読み込みは、私のパフォーマンス最適化の強力なツールです。重要ではないリソースの読み込みを、必要になるまで延期することで、最初のページの読み込み時間を大幅に短縮できます。画像の遅延読み込みを実装する方法の例を次に示します。

<img src="placeholder.jpg" data-src="large-image.jpg">



<p>This code uses the Intersection Observer API to load images only when they're about to enter the viewport.</p>

<p>Lastly, I always perform bundle analysis to visualize my bundle composition and identify optimization opportunities. Tools like webpack-bundle-analyzer have been invaluable in this process. Here's how I typically set it up in my Webpack configuration:<br>
</p>

<pre class="brush:php;toolbar:false">const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... other webpack config
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

ログイン後にコピー

これにより、大規模な依存関係や最適化の余地がある領域を特定するのに役立つ対話型のツリーマップが生成されます。

これらのテクニックは、JavaScript バンドルのサイズを削減するのに常に役立ち、Web アプリケーションの読み込み時間の短縮とパフォーマンスの向上につながりました。ただし、最適化は継続的なプロセスであることに注意することが重要です。ウェブテクノロジーが進化するにつれて、新しい最適化手法が登場し、常に最新の情報を入手し、それに応じて戦略を適応させることが重要です。

私が特に難しいと感じた側面の 1 つは、最適化と開発速度のバランスを取ることです。積極的な最適化により、コードベースの保守やデバッグが困難になる場合があります。たとえば、縮小は本番環境には最適ですが、デバッグがより困難になる可能性があります。そのため、私は常にデバッグ目的でソースマップを利用できるようにしています。

私が直面したもう 1 つの課題は、サードパーティのライブラリを扱うことです。独自のコードを最適化することはできますが、サードパーティの依存関係が事前にバンドルされていることが多く、バンドルのサイズが大幅に増加する可能性があります。このような場合、代替の軽量ライブラリを探すか、動的インポートなどのテクニックを使用して、必要な場合にのみこれらのライブラリをロードすると役立つことがわかりました。

また、アプリケーションごとに異なる最適化戦略から恩恵を受ける可能性があることにも言及する価値があります。たとえば、シングルページアプリケーション (SPA) では、コード分割と遅延読み込みのメリットが大きくなる一方、よりシンプルなマルチページサイトでは、縮小と圧縮に重点が置かれる可能性があります。

これらの最適化を実装する場合、その影響を測定することが重要です。私は最適化を実装する前後に常にパフォーマンス監査を実行し、望ましい効果が得られていることを確認しています。この点では、Lighthouse や WebPageTest などのツールが非常に役立ちます。

より複雑な例を使用して、これらのテクニックのいくつかをさらに詳しく見てみましょう。

React アプリケーションでのコード分割には、React.lazy と Suspense を使用します。

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

ログイン後にコピー

この設定により、各ルートを個別にロードできるようになり、初期バンドルサイズが削減されます。

ツリーシェイキングの場合、ES6 モジュール構文で最適に動作することに注意することが重要です。以下は、ツリーの揺れを最大限に活用するためにユーティリティモジュールを構築する方法の例です。

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

ログイン後にコピー

この場合、アプリケーションの他の場所で使用されていない場合、減算関数と除算関数は最終バンドルから除外されます。

縮小化に関しては、最近のビルドツールにはデフォルトでこのステップが含まれていることがよくあります。ただし、設定を微調整することでさらに良い結果が得られる場合があります。たとえば、Terser では、次のような構成を使用できます:

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

ログイン後にコピー

この構成はコードを縮小するだけでなく、コンソールステートメントも削除します。これは実稼働ビルドに役立ちます。

圧縮の場合、サーバー側の設定が重要ですが、Webpack プラグインを使用してアセットを事前圧縮することもできます。 CompressionWebpackPlugin はこれに最適です:

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

ログイン後にコピー

このプラグインは、元のアセットと一緒に gzip 圧縮されたバージョンのアセットを作成し、サーバーがそれらを使用するように構成されている場合、さらに高速なコンテンツ配信を可能にします。

遅延読み込みは画像だけにとどまらない可能性があります。すぐに必要ではないあらゆるリソースに適用できます。たとえば、重いサードパーティライブラリを遅延ロードする場合があります:

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

ログイン後にコピー

この方法では、ユーザーがチャートを見たいときにのみチャートライブラリが読み込まれ、初期バンドルを無駄のない状態に保ちます。

バンドル分析に関しては、得られた洞察が驚くべき最適化につながる可能性があります。たとえば、私はかつて、日付書式設定ライブラリがバンドルに大幅な重みを加えていることに気づきました。これを特定のユースケースをカバーするいくつかのカスタム関数に置き換えることで、バンドルサイズを大幅に削減することができました。

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

ログイン後にコピー

バンドル分析に基づくこの種の対象を絞った最適化は、パフォーマンスの大幅な向上につながる可能性があります。

結論として、JavaScript バンドルサイズの最適化は多面的なプロセスであり、アプリケーションの構造とニーズを十分に理解する必要があります。これらの手法 (コード分割、ツリーシェイキング、縮小、圧縮、遅延読み込み、バンドル分析) を実装することで、バンドルサイズを大幅に削減し、アプリケーションのパフォーマンスを向上させることができます。目標は、バンドルを小さくすることだけではなく、より速く、より効率的なエクスペリエンスをユーザーに提供することであることに注意してください。私たちがウェブ上で可能なことの限界を押し広げ続けるにつれて、これらの最適化テクニックはますます重要になるでしょう。

101冊

101 Books は、著者 Aarav Joshi が共同設立した AI 主導の出版社です。高度な AI テクノロジーを活用することで、出版コストを信じられないほど低く抑えており、書籍によっては $4 という低価格で販売されており、誰もが質の高い知識にアクセスできるようになっています。

Amazon で入手できる私たちの書籍 Golang Clean Code をチェックしてください。

最新情報とエキサイティングなニュースにご期待ください。本を購入する際は、Aarav Joshi を検索して、さらに多くのタイトルを見つけてください。提供されたリンクを使用して特別割引をお楽しみください!