Shulou(Shulou.com)06/02 Report--

Editor to share with you how to achieve lazy loading and preloading of webpack. I hope you will get something after reading this article. Let's discuss it together.

Normal loading

For convenience, the code in index.js is very simple

Console.log ('index.js 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 buttons in index.html

Click

Execute the webpack command:

You can see that test.js is already loaded when the button is not clicked. If the test.js is large, loading consumes performance. We just want to be able to load it when we need it.

Lazy loading

Modify the code in index.js

Console.log ('index.js 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 load failed error:') Error)})}

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

Only index.js was loaded before clicking the button.

Click the button:

You can see that test.js does not execute until the button is clicked.

Preload

Lazy loading enables js files to be loaded on demand and loaded only when needed, but if the js file is very large and slow to load, reloading when in use will make the page stutter. To optimize this problem, you can use Prefetch to preload first.

No preloading is used

The test.js file will not be loaded until the button is clicked

The test.js file will not be loaded until the button is clicked

Use preloading

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 load failed error:', error)})}

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

Click the button:

Summary

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

Lazy load: load only when needed

Preload: wait for other resources to be loaded and the browser is idle, and then secretly load resources that are set to be preloaded

After reading this article, I believe you have a certain understanding of "how to achieve lazy loading and preloading of webpack". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.