ImportMaps使用-优快云博客

本文链接：https://blog.youkuaiyun.com/cdns_1/article/details/144912383

文章目录

Import Maps 是一种新的 Web 标准，它允许开发者在 HTML 文档中直接指定 JavaScript 模块的映射，。通过importmap，你可以将模块名称（裸模块）映射到具体的 URL 地址，这样在import语句或import()函数中就可以使用这些名称来引用模块，而不需要提供完整的 URL 路径。

MDN ImportMap

基本设置

首先，在 HTML 文档中添加一个 <script> 标签，并设置 type 属性为 "importmap"。在这个标签中定义一个 JSON 对象来指定模块映射：

不得指定 src、async、nomodule、defer、crossorigin、integrity 和 referrerpolicy 属性。

<script type="importmap">
  {
    "imports": {
      "dayjs": "https://cdn.skypack.dev/dayjs@1.10.7"
    }
  }
</script>
<script type="module">
  import dayjs from "dayjs";
  console.log(dayjs("2019-01-25").format("YYYY-MM-DDTHH:mm:ssZ[Z]"));
</script>

在这个例子中，dayjs 是模块标识符，它被映射到 CDN 上的 dayjs 库的 URL。

映射多个模块

你可以在 imports 对象中定义多个模块映射：

<script type="importmap">
  {
    "imports": {
      "react": "https://cdn.skypack.dev/react@17.0.1",
      "react-dom": "https://cdn.skypack.dev/react-dom",
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
      "dayjs": "https://cdn.skypack.dev/dayjs@1.10.7"
      "lodash": "/node_modules/lodash-es/lodash.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from "vue";
  import dayjs from "dayjs";
  createApp({
    data() {
      return {
        message:
          "Hello Vue!" + dayjs("2025-01-01").format("YYYY-MM-DDTHH:mm:ssZ[Z]"),
      };
    },
  }).mount("#app");
</script>

每个属性都对应于一个映射，左侧是模块名称，右侧是模块的 URL。
在这里插入图片描述

作用域模块标识符映射

在不同的页面可能需要用到不同的模块，这时可以用importmap的scopes部分来定义这个规则，仅有加载的模块包含以下路径的 URL：“/modules/customshapes/”，映射才会使用作用域映射。

<script type="importmap">
{
  "imports": {
    "lodash": "/path/to/lodash.js"
  },
  "scopes": {
    "/modules/customshapes/": {
      "dayjs": "https://cdn.skypack.dev/dayjs@1.10.7"
    }
  }
}
</script>

使用外部 Import Maps 文件

你也可以将 Import Maps 放在一个外部文件中，并通过 src 属性引入：

<script type="importmap" src="importmap.json"></script>

确保外部文件的 Content-Type 头部设置为 application/importmap+json。

动态构建 Import Maps

Import Maps 支持动态构建，这意味着你可以根据条件来改变模块映射：

<script>
  const importMap = {
    imports: {
      "lazyload": "player.min.js",
    }
  };
  const imp = document.createElement('script');
  imp.type = 'importmap';
  imp.textContent = JSON.stringify(importMap);
  document.currentScript.after(imp);
</script>

这种方式需要确保创建和插入 import map 脚本标签之前进行，因为修改一个已经存在的 import map 对象不会有任何效果。

减少网络请求

使用 Import Maps 可以减少网络请求的主要原因是，可以将多个模块合并成一个请求，从而减少了网络请求的次数，提高了页面的加载速度。例如：

<script type="importmap">
  {
    'lodash': 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js',
    'vue': 'https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.esm-browser.js',
    'axios': 'https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js'
  };
</script>