背景

懒加载的概念,意思是,使用到再加载,如果没有使用到,则不去加载

理解

例如,我们在写一个瀑布流的图片展示站点时,一个页面,可能会有超出屏幕数倍长度的内容,如果一次性加载所有的图片资源,会造成页面的卡顿,影响用户体验,于是有了懒加载的概念,只有滚动到这一屏幕,才会加载这一屏幕的内容(一般滚动类的会加载当前屏幕及上下各一屏幕的内容),webpack中的懒加载,也可以这样理解。

操作

在上一节的基础上,对项目目录进行改造

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
webpack_learn
|- node_modules
|- package.json
|- webpack.config.js
|- yarn.lock
|- src
|- let.js
|- get.js
|- index.js
|- math.js
|- print.js
|- dist
|- vendors~lodash.bundle.js
|- bundle.js
|- index.html

上一章节中srcindex.js的内容

1
2
3
4
5
6
7
8
9
10
import _ from "lodash";
function getLodash(){
return import(/* webpackChunkName: "lodash" */ 'lodash').then((_)=>{//这里的注释很重要,影响打包后的包名字
console.log(_)
})
}
let name = require('./let.js');
let sayName = require('./get.js');
sayName('大家好,我的名字是'+name)
getLodash()

我们可以看到,getLodash()是每次都会调用的,可以设想下,如果,我们不是每次都调用,改成点击按钮才调用的话,如果用户不点击这个按钮,就不会加载了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    import _ from "lodash";
function getLodash(){
return import(/* webpackChunkName: "lodash" */ 'lodash').then((_)=>{//这里的注释很重要,影响打包后的包名字
console.log(_)
})
}
function createElement(tagName){
var element = document.createElement(tagName);
element.innerHTML = '点击我加载lodash';
return element;
}

+ let div = createElement('div');
+ div.onclick=function(){
+ getLodash()
+ }
+ document.body.appendChild(element);

let name = require('./let.js');
let sayName = require('./get.js');
sayName('大家好,我的名字是'+name)
getLodash()

这样就变成了,用户点击按钮时候,才会加载lodash了,这个思路可以在日常做需求的时候使用,可能更好的减少初始加载速度