webpackの遅延読み込みとプリロードの詳細な説明

通常の読み込み

見やすくするために、index.jsのコードは非常にシンプルです

console.log('index.js が実行されました')
'./test.js' から { test } をインポートします。
document.getElementById('btn-wrap').onclick = 関数 () {
    テスト（）
}

test.js

console.log('test.js が実行されました')
エクスポート関数test() {
    定数値 = 'hello world'
    console.log('テスト値: ', 値)
}

index.htmlにボタンを追加する

    <button id='btn-wrap'>クリック</button>

webpack コマンドを実行します。

ボタンがクリックされていないときに test.js が読み込まれていることがわかります。 test.js が大きい場合、それをロードするとパフォーマンスが低下します。必要なときにロードできるようにしたいと考えています。

遅延読み込み

index.jsのコードを修正する

console.log('index.js が実行されました')
// './test.js' から { test } をインポートします
// document.getElementById('btn-wrap').onclick = function () {
//テスト（）
// }
document.getElementById('btn-wrap').onclick = 関数 () {
    console.log('==== ボタンをクリックしてください')
    インポート(/*webpackChunkName:'test' */"./test")
        .then(({テスト}) => {
            console.log('テストが正常にロードされました')
            テスト（）
        })
        .catch(エラー => {
            console.log('テストの読み込みに失敗しましたエラー:', error)
        })
}

webpackコマンドを再度実行し、ブラウザでログを表示します。

ボタンをクリックする前にindex.jsのみが読み込まれます

ボタンをクリックして下さい:

ボタンをクリックするとtest.jsが実行されていることがわかります。

プリロード

遅延読み込みは、js ファイルのオンデマンド読み込みを実装します。つまり、必要なときにのみ js ファイルが読み込まれます。ただし、js ファイルが非常に大きく読み込みが遅い場合は、使用中に読み込むとページがフリーズします。この問題を最適化するには、最初にプリフェッチを使用してプリロードすることができます。

プリロードを使用しない

ボタンがクリックされるまで test.js ファイルは読み込まれません

test.jsファイルはボタンをクリックした後にのみ読み込まれます

プリロードの使用

プリロードを使用するにはwebpackPrefetch:trueを設定します

document.getElementById('btn-wrap').onclick = 関数 () {
    console.log('==== ボタンをクリックしてください')
    インポート(/*webpackChunkName:'test'、webpackPrefetch:true*/"./test")
        .then(({テスト}) => {
            console.log('テストが正常にロードされました')
            テスト（）
        })
        .catch(エラー => {
            console.log('テストの読み込みに失敗しましたエラー:', error)
        })
}

ボタンをクリックする前に、test.js ファイルがプリロードされます。