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 文件。