跳到主要内容

认识

2024年11月23日
柏拉文
越努力，越幸运

一、认识​

import() 是 ES Module 提供的一种动态导入语法，它可以在运行时按需加载 JavaScript 模块。Webpack 对 import() 提供了特殊支持，允许动态导入被视为代码分割点（chunk），从而提高应用的加载性能。

二、语法​

2.1 then 形式​

(async () => {
    import(/* webpackChunkName: "module1" */ "./module1.js").then((module) => {
        const {
        default: { name },
        } = module;
        console.log(name);
    });
})();

2.2 async/await 形式​

(async ()=>{
    const {
    default: { name },
    } = import(/* webpackChunkName: "module1" */ "./module1.js");
    console.log(name);
})()

三、问题​

3.1 import() 是如何实现懒加载的？​

import() 是 ES 模块动态导入的一种语法, 它能让模块在运行时按需加载, 实现懒加载。底层实现机制:

一、代码拆分: 当你使用如 webpack, Rollup 等打包工具时，工具会识别 import() 的调用，并将其引用的模块单独拆分成一个代码块（chunk）。这意味着该模块不会被打包进主 bundle，而是在运行时按需加载。

二、异步加载: 当代码执行到 import() 时, 打包工具生成的运行时代码会: 1. 检查该模块是否已经加载（缓存中是否存在）; 2. 如果未加载, 则动态创建一个 <script> 标签, 指向拆分后的 chunk 文件, 并将其插入到 DOM 中; 3. 当脚本加载完成并执行后, 模块内的代码会被执行, 模块的导出值被缓存; 4. Promise 解析并返回模块的导出对象。一旦模块加载并执行, 其导出内容会被缓存。下次再通过 import() 加载相同模块时, 不需要重新发起网络请求, 而是直接返回缓存的模块对象。