懒加载,也称为按需加载,是一种能够提升网站初始响应速度的方式javascript
在网站初次加载时,并不会加载所有代码,而是当用户完成某些特定操做后,才会引用新的代码块html
好的,首先咱们仍是来看一下不使用懒加载时的状况java
建立一个空文件夹 Demo
,做为项目的根目录,而后在该目录下运行如下命令安装依赖node
> # 建立 package.json 文件 > npm init -y > # 安装 webpack > npm install --save-dev webpack > npm install --save-dev webpack-cli > # 安装 lodash 模块 > npm install --save lodash
而后在根目录下建立 dist
和 src
文件夹,并在文件夹下建立相应的文件,最终的目录结构以下webpack
Demo - package.json - package-lock.json - webpack.config.js + node_modules + src - index.js + dist - index.html
webpack.config.js
的文件内容,指定 webpack 的一些基本配置web
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
/dist/index.html
的文件内容,引入打包以后的 bundle.js
文件shell
<!doctype html> <html> <head> <title>Demo</title> </head> <body> <script src="bundle.js"></script> </body> </html>
/src/index.js
的文件内容,当监听到点击事件以后,给 body
挂载一个 div
npm
在这种状况下,不管用户是否点击,网页都会提早加载 lodash 模块json
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); })
这种简单的模拟可能还真的看不出会有什么问题,那么咱们把它还原到一个真实的场景,举一个例子app
咱们将【加载 lodash 模块】看做是【加载视频资源】,将【点击事件】看做是【点击视频播放按钮】
某些状况下,用户可能不想观看视频,而咱们却提前把视频加载到网页中,这样就会大大下降网页首次加载的速度
正确的作法应该是当用户点击视频播放按钮(点击事件)以后,才开始加载视频资源(加载 lodash 模块)
好,既然知道了问题所在,那么接下来咱们就开始解决问题
这时候,咱们就要用到懒加载(按需加载)的技术,等用户须要的时候才开始加载
修改 /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学习笔记 】