Webpack の新機能とパフォーマンス最適化の実践の詳細な説明

1. 長期キャッシュ

Webpack 5 は、決定的なチャンク ID、モジュール ID、エクスポート ID を通じて長期キャッシュを実装しています。これは、同じ入力が常に同じ出力を生成することを意味します。このようにして、ユーザーが更新された Web サイトに再度アクセスすると、ブラウザーはすべてのリソースを再ダウンロードする代わりに、古いキャッシュを再利用できます。

// webpack.config.js
module.exports = {
    // ...
    output: {
        // Use contenthash to ensure that the file name is associated with the content
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].chunk.js',
        // Configure the asset hash to ensure long-term caching
        assetModuleFilename: '[name].[contenthash][ext][query]',
        // Use file system cache
        cache: {
            type: 'filesystem',
        },
    },
    // ...
};

2. ツリーシェイキングの最適化

Webpack 5 は、ツリーシェイクの効率、特に ESM のサポートを強化します。

// package.json
{
    "sideEffects": false, // Tell Webpack that this package has no side effects and can safely remove unreferenced code
}

// library.js
export function myLibraryFunction() {
// ...
}

// main.js
import { myLibraryFunction } from './library.js';

3. モジュールを連結する

Webpack 5 の concatenateModules オプションは、小さなモジュールを結合して HTTP リクエストの数を減らすことができます。ただし、この機能はメモリ消費量を増加させる可能性があるため、トレードオフを考慮して使用する必要があります。

    // webpack.config.js
    module.exports = {
    // ...
    optimization: {
        concatenateModules: true, // Defaults to true, but may need to be turned off in some cases
    },
    // ...
    };

4. Node.js モジュールのポリフィルの削除

Webpack 5 は、Node.js コア モジュールのポリフィルを自動的に挿入しなくなりました。開発者は、ターゲット環境に応じてそれらを手動でインポートする必要があります:

// If you need to be compatible with older browsers, you need to manually import polyfills
import 'core-js/stable';
import 'regenerator-runtime/runtime';

// Or use babel-polyfill
import '@babel/polyfill';

5. パフォーマンス最適化の実践

• キャッシュを使用する: ファイル システム キャッシュを使用してビルドの繰り返しを減らすように、cache.type:'filesystem' を構成します。

• SplitChunks の最適化: プロジェクトの要件に従って optimization.splitChunks を調整します。例:
  

// webpack.config.js
module.exports = {
// ...
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 10000, // Adjust the appropriate size threshold
            maxSize: 0, // Allow code chunks of all sizes to be split
        },
    },
    // ...
};

• モジュール解決の最適化:resolve.mainFields およびsolve.modules 構成を通じてモジュール解決のオーバーヘッドを削減します。

• 並列コンパイル: スレッドローダーまたはワーカーローダーを使用してタスクを並列処理し、コンパイルを高速化します。

• コード分割: 動的インポート (import()) を使用してコードをオンデマンドで読み込み、初期読み込み時間を短縮します。
  

// main.js
import('./dynamic-feature.js').then((dynamicFeature) => {
    dynamicFeature.init();
});

• モジュールフェデレーション: webpack.container.module 設定を使用して、アプリケーション間でのコード共有を実現し、重複したパッケージ化を減らします。

// webpack.config.js
module.exports = {
    // ...
    experiments: {
        outputModule: true, // Enable output module support
    },
    // ...
};

6. ツリーシェイクの詳細な適用

Webpack 5 自体はツリーの揺れを最適化していますが、開発者はいくつかの戦略を通じてその効果をさらに向上させることができます。コードが次の原則に従っていることを確認してください:

• グローバル変数の汚染を回避します: グローバル変数は、未使用のコードが識別されるツリーの揺れを防ぎます。
• 純粋な関数を使用する: Webpack が呼び出されていない関数を安全に削除できるように、関数に副作用がないことを確認してください。
• 明示的なエクスポート: 明示的なエクスポート (export default func の代わりに export const func = ...) を使用すると、ツリーのシェーキングがより正確に機能するようになります。
• デッドコードの除去: ESLint の no-unused-vars ルールと組み合わせて、未使用のインポートがないことを保証します。

7. ローダーとプラグインの最適化

• ローダーの使用量を削減します: 各ローダーによりビルド時間が増加します。ローダーは必要な場合にのみ使用し、一部のローダーの機能を統合できるかどうかを検討してください。
• ローダー キャッシュ: ローダーが、cacheDirectory オプションを使用するなどして、キャッシュをサポートし有効にしていることを確認します。
• 効率的なプラグインを選択する: 一部のプラグインはパフォーマンスに大きな影響を与える可能性があります。よりパフォーマンスの高い代替案を評価して選択するか、構成を調整してオーバーヘッドを削減します。

8. ソースマップ戦略

ソース マップはデバッグに不可欠ですが、ビルド時間と出力サイズも増加します。環境に応じてソースマップのタイプを調整できます:

// webpack.config.js
module.exports = {
    // ...
    output: {
        // Use contenthash to ensure that the file name is associated with the content
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].chunk.js',
        // Configure the asset hash to ensure long-term caching
        assetModuleFilename: '[name].[contenthash][ext][query]',
        // Use file system cache
        cache: {
            type: 'filesystem',
        },
    },
    // ...
};

9. 画像と静的リソースの処理

• アセット モジュール: Webpack 5 では、ローダーを追加構成せずに画像やその他の静的リソースを直接処理できるアセット モジュールが導入されています。この機能により構成が簡素化され、パフォーマンスが向上します。

// package.json
{
    "sideEffects": false, // Tell Webpack that this package has no side effects and can safely remove unreferenced code
}

// library.js
export function myLibraryFunction() {
// ...
}

// main.js
import { myLibraryFunction } from './library.js';

• 画像の圧縮と最適化: image-webpack-loader などのツールを使用して、ビルド中に画像を自動的に圧縮してファイル サイズを削減します。

10. 継続的な監視と分析

• Webpack Bundle Analyzer を使用する: これは、出力パッケージの構成を理解し、大きなモジュールを特定して最適化するのに役立つ強力な視覚化ツールです。
• 依存関係を定期的に確認します: npm Audit や Yarn Audit などのツールを使用して、依存関係のセキュリティと更新ステータスを確認し、使用されなくなったパッケージを速やかに削除するか、より軽量な代替パッケージにアップグレードします。

以上がWebpack の新機能とパフォーマンス最適化の実践の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。