最新の Web 開発における JavaScript のロード時間を最適化する実証済みの戦略

1. JavaScript ファイルを縮小して圧縮する

JavaScript ファイルを縮小すると、機能を変更することなく、空白、コメント、改行などの不要な文字が削除されます。これにより、ファイル サイズが削減され、読み込み時間が短縮されます。

例:
縮小前:

function greetUser(name) {
    console.log('Hello, ' + name + '!');
}

縮小後:

function greetUser(name){console.log("Hello, "+name+"!")}

縮小化用ツール:

• UglifyJS
• ターサー
• Google クロージャ コンパイラ

2. 非同期ロードを使用する

JavaScript ファイルを非同期的にロードすると、スクリプトのロードによってページのレンダリングがブロックされなくなります。これは、「script」タグの async 属性を使用して実現できます。

例:

 <script async src="script.js"></script>

3. 重要ではない JavaScript を延期する

重要ではない JavaScript を延期すると、ブラウザーが HTML と CSS を最初に読み込むことができるようになり、最初のページの読み込み時間が短縮されます。これを実現するには、defer 属性を使用します。

例:

<script defer src="non-critical-script.js"></script>

4. コード分割と遅延読み込み

JavaScript コードを小さなチャンクに分割し、必要な場合にのみロードすると、初期ロード時間を大幅に短縮できます。これは、Webpack などのモジュール バンドラーを使用して実行できます。

Webpack を使用した例:

// Dynamic import of moduleA
import(/* webpackChunkName: "moduleA" */ './moduleA').then(module => {
    module.default();
});

5. 依存関係の最適化と削減

依存関係を確認して最適化します。使用されていないライブラリを削除し、重いライブラリをより軽い代替ライブラリに置き換えることを検討してください。

例:
日付操作タスクのために、moment.js (65 KB) を date-fns (12 KB) に置き換えます。

6. ツリーシェイキングを実装する

ツリー シェイキングは、JavaScript バンドルからデッド コードを削除する手法です。通常、Webpack や Rollup などのモジュール バンドラーとともに使用されます。

module.exports = {
    mode: 'production',
    optimization: {
        usedExports: true,
    },
};

7. コンテンツ配信ネットワーク (CDN) を使用する

CDN から JavaScript ファイルを提供すると、ユーザーに近い場所からファイルが配信されるため、待ち時間を短縮できます。 CDN には、キャッシュの改善などの追加の利点もあります。

例:

<script src="https://cdn.example.com/library.js"></script>

8. JavaScript ファイルをキャッシュする

JavaScript ファイルのブラウザー キャッシュを利用すると、リピーターの読み込み時間を大幅に短縮できます。サーバーにキャッシュ ヘッダーを設定して、ブラウザに JavaScript ファイルをキャッシュするように指示できます。

キャッシュ制御ヘッダーの設定:

Cache-Control ヘッダーを設定するには、Web サーバーを構成する必要があります。さまざまな Web サーバーの例を次に示します:

Apache:
.htaccess ファイル内:

<ifmodule mod_expires.c>
  ExpiresActive On
  ExpiresByType application/javascript "access plus 1 year"
</ifmodule>
<ifmodule mod_headers.c>
  <filesmatch>
    Header set Cache-Control "public, max-age=31536000"
  </filesmatch>
</ifmodule>

Nginx:
nginx.conf またはサーバーブロック内:

location ~* \.js$ {
  expires 1y;
  add_header Cache-Control "public, max-age=31536000";
}

Express (Node.js):
サーバー構成:

const express = require('express');
const app = express();

app.use(express.static('public', {
  maxAge: '1y'
}));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

9. 画像ファイルとメディアファイルの最適化

Web アプリケーションの全体的なペイロードを減らすために、画像とメディア ファイルが最適化され、適切なサイズになっていることを確認します。

例:
srcset でレスポンシブ画像を使用する:

<img src="/static/imghw/default1.png" data-src="small.jpg" class="lazy" srcset="medium.jpg 600w, large.jpg 1200w" alt="最新の Web 開発における JavaScript のロード時間を最適化する実証済みの戦略">

10. パフォーマンスの監視と分析

Lighthouse、WebPageTest、ブラウザ開発者ツールなどのツールを使用して、Web アプリケーションのパフォーマンスを定期的に監視および分析します。これは、パフォーマンスのボトルネックを特定して対処するのに役立ちます。

JavaScript の読み込み時間の最適化は継続的なプロセスであり、定期的な監視と調整が必要です。これらの実証済みの戦略を実装することで、Web アプリケーションのパフォーマンスを大幅に向上させ、ユーザーに高速で楽しいエクスペリエンスを提供できます。

Web サイトの読み込みが速いと、ユーザー エクスペリエンスが向上するだけでなく、SEO ランキングやコンバージョン率にもプラスの影響を与えることに注意してください。 JavaScript のパフォーマンスを最高の状態に保つために、最新のトレンドとツールの最新情​​報を入手してください。

以上が最新の Web 開発における JavaScript のロード時間を最適化する実証済みの戦略の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。