Module

• 索引
• Module
  • export【
  • import【
  • default【
  • import()
  • import.meta【
    • import.meta.url【
    • import.meta.scriptElement【
    • import.meta.env.glob【

[TOC]

索引

• import()：(modulePath)，是 ES6 模块的动态导入语法，返回一个 Promise，允许在运行时异步加载模块。

---

Module

export【

import【

default【

import()

import()：(modulePath)，是 ES6 模块的动态导入语法，返回一个 Promise，允许在运行时异步加载模块。

• modulePath：string，导入模块的路径，支持变量或动态路径。

• 返回：

• promise：Promise，返回一个 Promise 模块对象，允许在运行时异步加载模块。

  • promise.then((module)=>void)：成功返回包含所有导出的模块对象。
  • promise.catch((error)=>void)：失败捕获错误。

• 语法：

  • 基本使用：

    import(modulePath)
      .then((module) => { // 使用模块导出的内容 })
      .catch((error) => { // 处理加载失败 });

  • 解构导出内容：

    import('./math.js')
      .then(({ add, multiply }) => {
        console.log(add(2, 3));        // 5
        console.log(multiply(2, 3));   // 6
      });

  • 动态加载默认导出：

    async function loadComponent() {
      const { default: Component } = await import('./Component.js');
      // 使用 Component
    }

  • Webpack魔法注释：指定打包后的 chunk 名称。

    import(/* webpackChunkName: "my-chunk" */ './module.js');

  • 预加载：结合 <link rel="preload"> 提前加载重要资源。

• 特性：

  • 按需加载：模块在实际调用 import() 时才会加载，适合代码分割和懒加载。

  • 返回模块对象：Promise 解析后返回一个包含所有导出属性/方法的模块对象，可通过该对象调用导出的属性/方法。

    import('./math.js').then((math) => {
      console.log(math.add(2, 3));      // 访问命名导出
      console.log(math.default);        // 访问默认导出（如果有）
    });

  • 触发分包：在Webpack打包时 import() 会触发分包操作。

  • 对比import：

    特性	静态 import	动态 import()
    加载时机	模块顶层，代码执行前解析	运行时按需加载
    路径形式	必须是字符串字面量	支持变量或动态路径
    执行位置	仅限模块顶层	可在函数、条件中调用
    返回值	同步导入，直接访问导出内容	返回 Promise，异步获取模块
    代码分割	默认打包到主文件	单独打包为 chunk 文件

  • 对比require()：

    特性	require()	import()
    是否异步	同步导入	返回 Promise，异步获取模块
    模块规范	CommonJS	ES Module

  • 打包工具支持：

    • Webpack：无需额外配置。会触发分包操作。
    • Rollup/Vite：无需额外配置。
    • Babel：需插件 @babel/plugin-syntax-dynamic-import 支持语法解析。

• 常见用途：

  • 按需加载代码：优化首屏性能，仅在需要时加载模块。

    document.getElementById('btn').addEventListener('click', () => {
      import('./heavyModule.js').then((module) => {
        module.runHeavyTask();
      });
    });

  • 路由懒加载：SPA中动态加载路由组件。

    // Vue Router 示例
    const routes = [
      {
        path: '/home',
        component: () => import('./views/Home.vue'), // 懒加载组件
      },
    ];

  • 条件加载模块：根据环境或用户行为加载不同模块。

    if (user.isAdmin) {
      import('./adminPanel.js').then(...);
    } else {
      import('./userPanel.js').then(...);
    }

  • 动态加载多语言包：根据用户语言加载对应资源。

    const lang = navigator.language;
    import(`./locales/${lang}.js`).then((messages) => {
      i18n.setLocaleMessage(lang, messages);
    });

• 注意事项：

  • 模块缓存：相同路径的 import() 多次调用只会加载一次，结果会被缓存。

import.meta【

import.meta.url【

import.meta.scriptElement【

import.meta.env.glob【