懒加载，也称为按需加载，是一种可以提高网站初始响应速度的方式
在网站初次加载时，并不会加载全部代码，而是当用户完成某些特定操作后，才会引用新的代码块
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 模块，从而达到按需加载的效果
总结：懒加载其实并不是什么神奇的技术，只是一种优秀的思想而已，这种思想值得我们学习
