Lazy loading, also known as demand loading, an initial response speed can improve the site's way
When the site first loads, and does not load all the code, but when the user completes certain operations, will refer to the new code block
1, there is a problem
Well, first, let's look at the case when not in use lazy loading
Create an empty folder Demoas the root of the project, and then run the following command to install depend on the directory
> # 创建 package.json 文件
> npm init -y
> # 安装 webpack
> npm install --save-dev webpack
> npm install --save-dev webpack-cli
> # 安装 lodash 模块
> npm install --save lodashThen created in the root directory distand srcfolders, and create the appropriate file in the folder, the final directory structure is as follows
Demo
- package.json
- package-lock.json
- webpack.config.js
+ node_modules
+ src
- index.js
+ dist
- index.htmlwebpack.config.js The contents of the file, specify some basic configuration webpack
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};/dist/index.htmlThe contents of the file, after the introduction of the package bundle.jsfile
<!doctype html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>/src/index.jsThe contents of the file, after listening to the click event, to bodymount adiv
In this case, regardless of whether users click on the page will load in advance lodash module
import _ from 'lodash';
function getComponent() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.addEventListener('click', () => {
var element = getComponent();
document.body.appendChild(element);
})This simple simulations can really see what the problem, then we have to restore it to a real-world scenario, give an example
We will load lodash [module] considered [resources] to load the video, click on the [events] considered [click on the video play button]
In some cases, users may not want to watch a video, and we are ahead of the video is loaded into a web page, this will greatly reduce the speed of the page is first loaded
The correct way is when the user clicks the video play button (click event) only after the video starts to load resources (load lodash module)
2, to solve the problem
Well, since we know the problem, then the next we begin to solve the problem
At this time, we have to use lazy load (demand load) technology, such as when the user needs only to start loading
Modify the /src/index.jsdocument reads as follows
async function getComponent() {
const _ = await import('lodash');
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.addEventListener('click', () => {
getComponent().then((element) => {
document.body.appendChild(element);
})
})Because lodash getComponent module is used only in function, but getComponent function is performed only after the click event
So we can load the code lodash modules which function on getComponent
Thus, only after clicking the incident, only to load lodash module, so as to achieve loaded on demand
Summary: lazy loading is not really magical technology, it is only a good idea, this idea that we can learn
[Read more webpack series, please see webpack study notes ]