背景

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

理解

例如，我们在写一个瀑布流的图片展示站点时，一个页面，可能会有超出屏幕数倍长度的内容，如果一次性加载所有的图片资源，会造成页面的卡顿，影响用户体验，于是有了懒加载的概念，只有滚动到这一屏幕，才会加载这一屏幕的内容（一般滚动类的会加载当前屏幕及上下各一屏幕的内容）,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

上一章节中src中index.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了，这个思路可以在日常做需求的时候使用，可能更好的减少初始加载速度