Detailed explanation of lazy loading and preloading of webpack

Normal loading

For ease of viewing, the code in index.js is very simple

console.log('index.js is executed')
import { test } from './test.js'
document.getElementById('btn-wrap').onclick = function () {
    test()
}

test.js

console.log('test.js executed')
export function test() {
    const value = 'hello world'
    console.log('test value: ', value)
}

Add a button in index.html

    <button id='btn-wrap'>Click</button>

Execute the webpack command:

You can see that test.js is loaded when the button is not clicked. If test.js is large, loading it will consume performance. We hope to load it when we need it.

Lazy Loading

Modify the code in index.js

console.log('index.js is executed')
// import { test } from './test.js'
// document.getElementById('btn-wrap').onclick = function () {
//test()
// }
document.getElementById('btn-wrap').onclick = function () {
    console.log('==== Click the button')
    import(/*webpackChunkName:'test' */"./test")
        .then(({test}) => {
            console.log('test loaded successfully')
            test()
        })
        .catch(error => {
            console.log('test loading failed error:', error)
        })
}

Execute the webpack command again and view the log in the browser

Only index.js is loaded before clicking the button

Click the button:

You can see that test.js is executed after clicking the button.

Preloading

Lazy loading implements on-demand loading of js files, which means they are loaded only when they are needed. However, if the js file is very large and loads slowly, loading it when it is in use will cause the page to freeze. To optimize this problem, you can use Prefetch to preload first.

Not using preloading

test.js file is not loaded until the button is clicked

The test.js file will be loaded only after clicking the button

Using Preload

Set webpackPrefetch:true to use preloading

document.getElementById('btn-wrap').onclick = function () {
    console.log('==== Click the button')
    import(/*webpackChunkName:'test' ,webpackPrefetch:true*/"./test")
        .then(({test}) => {
            console.log('test loaded successfully')
            test()
        })
        .catch(error => {
            console.log('test loading failed error:', error)
        })
}

The test.js file is preloaded before clicking the button:

Click the button:

Summarize

Normal loading : many resources are loaded in parallel, and multiple files are loaded at the same time

Lazy loading : loading only when needed

Preloading : Wait until other resources are loaded and the browser is idle, then secretly load the resources set to be preloaded

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!