1.动态导入
动态导入就是懒加载
,在不需要使用的时候不会发起网络请求,而是事件触发后才进行发起网络请求进行加载。
需要使用 import()
函数来进行导入,它是一个异步的,我们可以使用 .then
或者 await
来接收返回的数据。
我们在接收返回的内容时,需要注意的是:
自 webpack4 之后,在使用 import 导入 CommonJs 模块时,不会将 default 的值赋值给回调参数变量。而是将一个对象赋值给了回调函数中的参数,我们需要先将它解构出来,然后为它起一个别名。
window.onClickHandler = () => {
import('lodash')
.then(({ default: _ }) => {
console.log(_);
});
};
这样在触发 onClickHandler 函数时,就会发起网络请求,去加载 lodash 文件。
2.预获取
在使用动态导入这个方法后,如果在加载时网络不是很好,在加载的时候就会显得比较慢,我们希望在浏览器闲置时,自动将动态导入的内容先下载下来。
只需要在 import() 函数中加一段注释命令即可。
// webpackChunkName:这是在指定名称,可以不写。
// webpackPrefetch:预获取命令。
window.onClickHandler = () => {
import(/* webpackChunkName: 'lodash', webpackPrefetch: true */ 'lodash').then(
({ default: _ }) => {
console.log(_);
},
);
};
这样浏览器在闲置时就会自动加载 lodash 文件,而在执行 import 时,就会自动从缓存中提取。
这段注释的原理是:
会将<link rel="prefetch" href="lodash.js">
标签追加到页面头部,指示浏览器在闲置时间预取 lodash 文件。
评论 (0)