webpack学习笔记(五) 懒加载
懒加载，也称为按需加载，是一种可以提高网站初始响应速度的方式
在网站初次加载时，并不会加载全部代码，而是当用户完成某些特定操作后，才会引用新的代码块
1、存在问题
好的，首先我们还是来看一下不使用懒加载时的情况
创建一个空文件夹 Demo，作为项目的根目录，然后在该目录下运行以下命令安装依赖
> # 创建 package.json 文件
> npm init -y
> # 安装 webpack
> npm install --save-dev webpack
> npm install --save-dev webpack-cli
> # 安装 lodash 模块
> npm install --save lodash
然后在根目录下创建 dist 和 src 文件夹，并在文件夹下创建相应的文件，最终的目录结构如下
Demo
- package.json
- package-lock.json
- webpack.config.js
+ node_modules
+ src
- index.js
+ dist
- index.html
webpack.config.js 的文件内容，指定 webpack 的一些基本配置
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
/dist/index.html 的文件内容，引入打包之后的 bundle.js文件
<!doctype html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
/src/index.js 的文件内容，当监听到点击事件之后，给 body 挂载一个 div
在这种情况下，无论用户是否点击，网页都会提前加载 lodash 模块
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);
})
这种简单的模拟可能还真的看不出会有什么问题，那么我们把它还原到一个真实的场景，举一个例子
我们将【加载 lodash 模块】看作是【加载视频资源】，将【点击事件】看作是【点击视频播放按钮】
某些情况下，用户可能不想观看视频，而我们却提早把视频加载到网页中，这样就会大大降低网页首次加载的速度
正确的做法应该是当用户点击视频播放按钮（点击事件）之后，才开始加载视频资源（加载 lodash 模块）
2、解决问题
好，既然知道了问题所在，那么接下来我们就开始解决问题
这时候，我们就要用到懒加载（按需加载）的技术，等用户需要的时候才开始加载
修改 /src/index.js 文件内容如下
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);
})
})
因为 lodash 模块仅在 getComponent 函数中使用，而 getComponent 函数仅在 click 事件后执行
所以我们可以将加载 lodash 模块的代码放在 getComponent 函数当中
这样，只有在发生点击事件之后，才会去加载 lodash 模块，从而达到按需加载的效果
总结：懒加载其实并不是什么神奇的技术，只是一种优秀的思想而已，这种思想值得我们学习
【 阅读更多 webpack 系列文章，请看 webpack学习笔记 】
