动态 import()

https://v8.dev/features/dynamic-import

Dynamic import() 引入了一个新的类似函数的功能，相比静态的 import 提供了新的功能。本文比较这两个特性，并提供了新功能的介绍。

静态 import (回顾)

在 Chrome 61 中提供了对于 ES2015 的 modules 中 import 语句的支持。

考虑如下 module，它位于地址 ./utils.mjs

// Default export

export default () => {

  console.log('Hi from the default export!');

};

// Named export `doStuff`

export const doStuff = () => {

  console.log('Doing stuff…');

};

如下代码演示如何使用静态导入，并使用 ./util.mjs 模块。

<script type="module">

  import * as module from './utils.mjs';

  module.default();

  // → logs 'Hi from the default export!'

  module.doStuff();

  // → logs 'Doing stuff…'

</script>

注意

在上述示例中，使用了 .mjs 扩展名来表示这个一个模块，而不是常规的脚本。

在 Web 中，文件的扩展名并不重要，只要在 Content-Type 响应头中使用了正确的 MIME 类型即可 ( 例如，对于 JavaScript 文件来说，为 text/javascript) 。

.mjs 扩展名对于其它平台特别有用，比如 Node.js 和 d8，因为在这些环境中，没有 MIME 的支持或者其它强制的要求，例如 type="module" 来检测它到底是模块还是常规的脚本。我们这里使用 .mjs 扩展名来实现跨平台的一致性，并清楚地区分模块和常规脚本。

这里使用的导入模块方式就是 静态 定义：它只接受一个字面字符串作为模块的指示器，通过链接过程将绑定引入到本地范围。静态的 import 语法只能用于文件的顶级。

静态 import 支持重要的使用场景，例如静态分析，打包工具以及摇树操作。

对于有些场景，需要支持：

  • 按需加载模块 ( 或者有条件 )
  • 在运行时得到模块的指示符
  • 从常规的脚本 ( 不是模块) 中加载模块

这些需求都不能通过静态 import 得到。

动态 import()

Dynamic import() 引入了 import 的新特性来处理这些场景。import(moduleSpecifier) 返回请求模块的模块对象的一个 Promise。它将在获取之后创建，并检查该模块所有的依赖，以及该模块本身。

这里是如何使用动态 import() 来加载 ./utils.mjs 模块。

<script type="module">

  const moduleSpecifier = './utils.mjs';

  import(moduleSpecifier)

    .then((module) => {

      module.default();

      // → logs 'Hi from the default export!'

      module.doStuff();

      // → logs 'Doing stuff…'

    });

</script>

由于 import() 返回一个 Promise，就可以使用 async/await 来代替 Promise 的 then() 调用风格。

<script type="module">

  (async () => {

    const moduleSpecifier = './utils.mjs';

    const module = await import(moduleSpecifier)

    module.default();

    // → logs 'Hi from the default export!'

    module.doStuff();

    // → logs 'Doing stuff…'

  })();

</script>

注意

尽管 import() 看起来类似一个函数调用，实际上它是一个语法，只是使用了圆括号而已，类似 super()。这意味着 import() 的原型并不是 Function.prototype，所以你也不能对它使用 call() 或者 apply()。

类似语法也不能工作 const importAlias = import，甚至，import 都不是一个对象！尽管在实践中并不重要。

这里是一个使用动态 import() 来实现延迟加载模块的示例，基于一个小型的 SPA 应用的导航。

<!DOCTYPE html>

<meta charset="utf-8">

<title>My library</title>

<nav>

  <a href="books.html" data-entry-module="books">Books</a>

  <a href="movies.html" data-entry-module="movies">Movies</a>

  <a href="video-games.html" data-entry-module="video-games">Video Games</a>

</nav>

<main>This is a placeholder for the content that will be loaded on-demand.</main>

<script>

  const main = document.querySelector('main');

  const links = document.querySelectorAll('nav > a');

  for (const link of links) {

    link.addEventListener('click', async (event) => {

      event.preventDefault();

      try {

        const module = await import(`/${link.dataset.entryModule}.mjs`);

        // The module exports a function named `loadPageInto`.

        module.loadPageInto(main);

      } catch (error) {

        main.textContent = error.message;

      }

    });

  }

</script>

当正确使用的时候，使用动态 import() 来实现延迟加载可以非常强大，为了演示目的，Addy 创建了 an example Hacker News PWA，其中使用静态导入所有依赖的模块，在第一次加载的时候加载留言。更新后的版本 使用动态 import() 来延迟加载留言，避免了加载、解析和编译的代价，直到用户需要才会处理。

参考资料

动态 import()的更多相关文章

  1. React动态import()

    React动态import() react-router@v4代码分离,推荐的import().这里分享webpack配置和使用方法. 首先安装两个必须的包 cnpm i react-loadable ...

  2. python3 动态import

    有些情况下,需要动态的替换引入的包 1.常用的import方法 import platform import os 2.__import__ 动态引用 loop_manager = __import_ ...

  3. Element + Vue I18n动态import加载国际化语言包翻译文件

    需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...

  4. vite 动态 import 引入打包报错解决方案

    关注公众号: 微信搜索 前端工具人 ; 收货更多的干货 原文链接: 自己掘金文章 https://juejin.cn/post/6951557699079569422/ 关注公众号: 微信搜索 前端工 ...

  5. vue 动态路由按需加载的三种方式

    在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...

  6. 如何实现 React 模块动态导入

    如何实现 React 模块动态导入 React 模块动态导入 代码分割 webpack & code splitting https://reactjs.org/docs/code-split ...

  7. Angular中懒加载一个模块并动态创建显示该模块下声明的组件

    angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...

  8. Spring Boot中@Import三种使用方式！

    需要注意的是:ImportSelector.ImportBeanDefinitionRegistrar这两个接口都必须依赖于@Import一起使用,而@Import可以单独使用. @Import是一个 ...

  9. python 学习笔记十五 web框架

    python Web程序 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. Python的WEB框架分为两类: 自己写socket,自 ...

  10. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

随机推荐

  1. kali系统安装和CVE-2017-12615测试

    1 安装kali系统 1.1 下载VMware压缩包 kali-linux-2022.1 默认的用户和密码是kali 1.2 初始化系统 sudo apt update -y #kali sudo a ...

  2. 强大的USB协议分析工具

    2020年最后一天了,感谢大家一年来对我文章的支持,有你们的支持就是我强大的动力. 今天来给大家介绍一个USB 协议分析软件LeCroy USB Advisor,软件安装包下载连接如下: 链接:htt ...

  3. Need BLUETOOTH PRIVILEGED permission以及requestMtu导致蓝牙断连问题

    在部分Android手机上,当连接上GATTService后直接requestMtu有可能会造成蓝牙连接中断,随后继续重新连接会报错Need BLUETOOTH PRIVILEGED permissi ...

  4. 背靠AI，让AI当牛马，解决程序员的烦恼

    开篇问题? 作为程序员的你,写代码累吗?累!苦嘛?苦,想哭嘛?哭不出来. 还在为工作中繁重的编码任务.复杂的调试过程以及不断更新的技术栈而苦恼吗?这些挑战不仅消耗大量的时间和精力,还时常让人陷入思维的 ...

  5. 云原生爱好者周刊：PromLabs 开源 PromQL 可视化工具 PromLens

    开源项目推荐 PromLens PromLabs 开源了旗下的 PromQL 可视化工具 PromLens,它可以通过图形化的方式展示 PromQL 的语法特征,对相关查询参数进行解释,并提供告警和常 ...

  6. SpringBoot 2.3 升级到 SpringBoot 2.7 爬坑-- SpringDoc & Swagger

    目录 POM yml 配置自定义的 OpenAPI 规范 拦截器去除 swagger 的接口验证 模型 Controller 配置 常用注解 注意:Swagger支持SpringBoot2.0但不支持 ...

  7. 低配置PC环境下的魔兽世界游戏体验：ToDesk云电脑性能测试分析

    近期魔兽世界再度开服,吸引了众多游戏老玩家回归.然而随着游戏内容的不断更新,其对电脑配置的要求也在逐渐升提高.对于许多电脑配置较低的老玩家,如何在不升级硬件的情况下流畅运行魔兽世界成为了一个难题. 随 ...

  8. MongoDB mongod.log "connection refused because too many open connections" 处理方法

    一.MongoDB副本集 副本集名称 角色 IP地址 端口号 优先级 CCTV-test Primary 192.168.1.21 27017 10 Secondary 192.168.1.21 27 ...

  9. Rigid Body Simulation

    目录 0 前言 1 核心技术 1.1 Semi-implicit Euler 1.2 刚体模拟 1.3 Collision 2 实现 X Ref 0 前言 声明:此篇博客仅用于个人学习记录之用,并非是 ...

  10. P9119 [春季测试 2023] 圣诞树

    参考博客: 春季测试 2023] 圣诞树 题解 - 洛谷专栏 (luogu.com.cn) 题意:给定二维平面上一个凸多边形的 \(n\) 个顶点, 求一种方案,使得从最高点开始,不重复地经过所有点后 ...