跳到主要内容

import()

2023年12月20日
柏拉文
越努力，越幸运

一、认识​

二、语法​

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);
})()

三、内联注释​

// 多个可能目标
import(
/* webpackInclude: /\.json$/ */
/* webpackExclude: /\.noimport\.json$/ */
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
/* webpackPreload: true */
`./locale/${language}`
);

3.1 webpackMode​

webpackMode: 可以指定以不同的模式解析动态导入, 可选项如下:

  • lazy: （默认）：为每个 import() 导入的模块，生成一个可延迟加载(lazy-loadable) chunk。

  • lazy-once: 生成一个可以满足所有 import() 调用的单个可延迟加载(lazy-loadable) chunk。此 chunk 将在第一次 import() 调用时获取，随后的 import() 调用将使用相同的网络响应。注意，这种模式仅在部分动态语句中有意义，例如 import(./locales/${language}.json)，其中可能含有多个被请求的模块路径。

  • eager: 不会生成额外的 chunk，所有模块都被当前 chunk 引入，并且没有额外的网络请求。仍然会返回 Promise，但是是 resolved 状态。和静态导入相对比，在调用 import（）完成之前，该模块不会被执行。

  • weak: 尝试加载模块，如果该模块函数已经以其他方式加载（即，另一个 chunk 导入过此模块，或包含模块的脚本被加载）。仍然会返回 Promise，但是只有在客户端上已经有该 chunk 时才成功解析。如果该模块不可用，Promise 将会是 rejected 状态，并且网络请求永远不会执行。当需要的 chunks 始终在（嵌入在页面中的）初始请求中手动提供，而不是在应用程序导航在最初没有提供的模块导入的情况触发，这对于通用渲染（SSR）是非常有用的。

3.2 webpackInclude​

webpackInclude: 在导入解析(import resolution)过程中，用于匹配的正则表达式。只有匹配到的模块才会被打包。

3.3 webpackExclude​

webpackExclude: 在导入解析(import resolution)过程中，用于匹配的正则表达式。所有匹配到的模块都不会被打包。

3.4 webpackPreload​

webpackPreload: 预加载（preload）, 告诉浏览器一定会用到某个资源，浏览器会提升这个资源的加载优先级为 High, 表现如下:

  1. 预加载 chunk 会在父 chunk 加载时以并行方式开始加载

  2. 预加载 chunk 具有中等优先级，并会立即下载

  3. 预加载 chunk 会在父 chunk 中立即请求，用于当下时刻;

3.5 webpackPrefetch​

webpackPrefetch: 预获取（prefetch）,告诉浏览器可能会用到某个资源，浏览器会以一个非常低的优先级 lowest,在空闲时间段加载这个资源, 表现如下:

  1. 预获取 chunk 会在父 chunk 加载结束后开始加载

  2. 预获取 chunk 则在浏览器闲置时下载

  3. 预获取 chunk 则用于未来的某个时刻

3.6 webpackChunkName​

webpackChunkName: 新 chunk 的名称。 从 webpack 2.6.0 开始，占位符 [index] 和 [request] 分别支持递增的数字或实际的解析文件名。 添加此注释后，将单独的给我们的 chunk 命名为 [my-chunk-name].js 而不是 [id].js。

3.7 webpackIgnore​

注意: 将 webpackIgnore 设置为 true 则不进行代码分离。