最新の Web 開発における JavaScript のロード時間を最適化する実証済みの戦略-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-07-29 13:18:23

オリジナル

746 人が閲覧しました

Proven Strategies to Optimize JavaScript Load Times in Modern Web Development

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="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" alt="最新の Web 開発における JavaScript のロード時間を最適化する実証済みの戦略">

ログイン後にコピー

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

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

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

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

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