webpack学习笔记(五) 懒加载

2019/09/10 10:15
阅读数 27

懒加载,也称为按需加载,是一种可以提高网站初始响应速度的方式

在网站初次加载时,并不会加载全部代码,而是当用户完成某些特定操作后,才会引用新的代码块

1、存在问题

好的,首先我们还是来看一下不使用懒加载时的情况

创建一个空文件夹 Demo,作为项目的根目录,然后在该目录下运行以下命令安装依赖

> # 创建 package.json 文件
> npm init -y
> # 安装 webpack
> npm install --save-dev webpack
> npm install --save-dev webpack-cli
> # 安装 lodash 模块
> npm install --save lodash

然后在根目录下创建 distsrc 文件夹,并在文件夹下创建相应的文件,最终的目录结构如下

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学习笔记

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部