ES6 模块动态导入详解（动态导入 vs 静态导入，附静态导入语法规范）

以下回答由Deepseek AI 生成，内容仅供参考，请仔细甄别。

ES6 模块动态导入详解

动态导入 vs 静态导入对比

特性	静态导入 (import)	动态导入 (import())
语法类型	声明语句	函数表达式
加载时机	编译时	运行时
执行顺序	模块顶部，优先执行	按代码执行顺序
使用位置	只能模块顶层	任何位置（函数、条件、异步中）
返回值	导入的绑定	Promise 对象

---

基础语法与用法

语法对比表格

导入方式	静态导入语法	动态导入语法
默认导入	import module from './module.js';	import('./module.js').then(module => {});
命名导入	import { func } from './module.js';	import('./module.js').then(({ func }) => {});
重命名导入	import { func as myFunc } from './module.js';	import('./module.js').then(({ func: myFunc }) => {});
混合导入	import defaultExport, { named } from './module.js';	import('./module.js').then(module => {<br> const { named } = module;<br>});

基本使用示例

// 静态导入（编译时）
import { utils } from './utils.js';
import Component from './Component.js';

// 动态导入（运行时）
// 1. 基础用法
import('./module.js')
  .then(module => {
    module.default(); // 调用默认导出
    module.namedFunction(); // 调用命名导出
  })
  .catch(error => {
    console.error('模块加载失败:', error);
  });

// 2. 使用 async/await
async function loadModule() {
  try {
    const module = await import('./module.js');
    module.init();
  } catch (error) {
    console.error('加载失败:', error);
  }
}

---

动态导入的应用场景

使用场景对比表格

场景	问题描述	动态导入解决方案
路由级代码分割	整个应用打包文件过大	按路由动态加载组件
条件加载	某些功能只有特定用户需要	满足条件时再加载模块
性能优化	首屏加载时间过长	延迟加载非关键模块
依赖优化	某些库只在特定场景使用	需要时动态引入
错误恢复	模块加载失败需要降级	捕获错误并提供备选方案

具体实现示例

1. 路由级代码分割

// React Router + 动态导入
const Home = lazy(() => import('./pages/Home.js'));
const About = lazy(() => import('./pages/About.js'));
const Contact = lazy(() => import('./pages/Contact.js'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>加载中...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

// Vue Router 动态导入
const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about', 
    component: () => import('./views/About.vue')
  }
];

2. 条件加载

// 根据用户权限动态加载管理模块
async function loadAdminPanel() {
  if (user.isAdmin) {
    const adminModule = await import('./admin-panel.js');
    adminModule.init();
  }
}

// 根据功能需求动态加载
async function loadRichTextEditor() {
  if (document.querySelector('.rich-text-area')) {
    const editor = await import('./text-editor.js');
    editor.initAll();
  }
}

3. 性能优化 - 延迟加载

// 首屏后加载非关键功能
document.addEventListener('DOMContentLoaded', async () => {
  // 首屏关键代码立即执行
  
  // 非关键功能延迟加载
  setTimeout(async () => {
    const analytics = await import('./analytics.js');
    const chatWidget = await import('./chat-widget.js');
    
    analytics.trackPageView();
    chatWidget.init();
  }, 3000);
});

// 交互时加载
button.addEventListener('click', async () => {
  const heavyModule = await import('./heavy-calculation.js');
  const result = heavyModule.complexCalculation();
  displayResult(result);
});

---

高级用法与模式

批量动态导入

模式	描述	代码示例
并行加载	同时加载多个模块	Promise.all([import('./a.js'), import('./b.js')])
顺序加载	按顺序加载依赖模块	在 async 函数中依次 await
条件链式加载	根据前一个模块结果决定下一个	if (moduleA.needB) await import('./b.js')

// 1. 并行加载多个模块
async function loadAllComponents() {
  try {
    const [userModule, productModule, cartModule] = await Promise.all([
      import('./user-service.js'),
      import('./product-service.js'), 
      import('./cart-service.js')
    ]);
    
    return {
      user: userModule.default,
      product: productModule.default,
      cart: cartModule.default
    };
  } catch (error) {
    console.error('组件加载失败:', error);
  }
}

// 2. 顺序加载依赖模块
async function loadWithDependencies() {
  const core = await import('./core.js');
  if (core.needsPlugin) {
    const plugin = await import('./plugin.js');
    await plugin.init();
  }
  return core;
}

// 3. 动态路径导入
async function loadModuleByFeature(featureName) {
  const module = await import(`./features/${featureName}.js`);
  return module.default;
}

错误处理与降级

错误类型	处理策略	示例
模块不存在	提供默认实现	catch 中返回降级模块
网络错误	重试机制	实现重试逻辑
版本不兼容	加载兼容版本	根据环境加载不同版本

// 完善的错误处理
async function loadModuleWithFallback(modulePath, fallbackModule) {
  try {
    const module = await import(modulePath);
    return module;
  } catch (error) {
    console.warn(`模块 ${modulePath} 加载失败, 使用降级方案:`, error);
    
    // 降级方案
    if (fallbackModule) {
      return fallbackModule;
    }
    
    // 或者返回空实现
    return {
      default: () => console.log('模块不可用'),
      init: () => Promise.resolve()
    };
  }
}

// 带重试的加载
async function importWithRetry(modulePath, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      return await import(modulePath);
    } catch (error) {
      if (i === retries - 1) throw error;
      console.log(`第 ${i + 1} 次重试...`);
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
}

---

构建工具集成

Webpack 动态导入特性

特性	说明	示例
魔法注释	控制打包行为	import(/* webpackChunkName: "my-chunk" */ './module')
预获取/预加载	资源提示	/* webpackPrefetch: true */
分组打包	相关模块打包到一起	/* webpackMode: "lazy" */

// Webpack 魔法注释使用
const getComponent = () => import(
  /* webpackChunkName: "lodash" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  'lodash'
);

// 路由分割的典型配置
const routes = [
  {
    path: '/dashboard',
    component: () => import(
      /* webpackChunkName: "dashboard" */
      /* webpackPrefetch: true */
      './views/Dashboard.vue'
    )
  },
  {
    path: '/admin',
    component: () => import(
      /* webpackChunkName: "admin" */
      './views/Admin.vue'
    )
  }
];

Vite 中的动态导入

// Vite 支持原生动态导入，无需额外配置
// 1. 常规动态导入
const module = await import('./module.js');

// 2. 变量路径导入（Vite 会自动处理）
const modules = import.meta.glob('./components/*.vue');

// 使用 glob 导入
const components = {};
const componentModules = import.meta.glob('./components/*.vue');

for (const path in componentModules) {
  const componentName = path.split('/').pop().replace('.vue', '');
  components[componentName] = await componentModules[path]();
}

---

性能优化策略

加载时机优化表格

加载策略	触发条件	适用场景
立即加载	页面加载完成	关键功能，高概率使用
空闲时加载	requestIdleCallback	非关键功能，提升体验
交互时加载	用户点击/悬停	功能复杂，使用频率低
可视区加载	IntersectionObserver	长页面，滚动到可见区域

// 1. 空闲时加载
if ('requestIdleCallback' in window) {
  requestIdleCallback(async () => {
    const analytics = await import('./analytics.js');
    analytics.init();
  });
}

// 2. 交互时加载（点击前预加载）
function setupLazyButton() {
  const button = document.getElementById('lazy-button');
  let moduleLoaded = false;
  let modulePromise = null;
  
  // 鼠标悬停时开始加载
  button.addEventListener('mouseenter', () => {
    if (!modulePromise) {
      modulePromise = import('./heavy-feature.js');
    }
  });
  
  button.addEventListener('click', async () => {
    if (!moduleLoaded) {
      const module = await modulePromise;
      module.init();
      moduleLoaded = true;
    }
  });
}

// 3. 可视区加载
const observer = new IntersectionObserver(async (entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      const module = await import('./lazy-component.js');
      module.render(entry.target);
      observer.unobserve(entry.target);
    }
  }
});

document.querySelectorAll('.lazy-component').forEach(el => {
  observer.observe(el);
});

---

注意事项与最佳实践

注意事项表格

注意事项	说明	解决方案
浏览器支持	现代浏览器支持，IE不支持	使用 Polyfill 或构建工具转译
CSP 限制	内容安全策略可能限制	配置适当的 CSP 规则
相对路径	路径解析基于当前URL	使用绝对路径或 new URL
模块缓存	相同路径只加载一次	利用缓存优化性能

最佳实践

// 1. 使用绝对路径避免问题
const modulePath = new URL('./modules/app.js', import.meta.url).href;
const module = await import(modulePath);

// 2. 统一错误处理
async function safeImport(path) {
  try {
    return await import(path);
  } catch (error) {
    console.error(`导入失败: ${path}`, error);
    throw error; // 或返回降级方案
  }
}

// 3. 生产环境使用版本号避免缓存问题
const getVersionedModule = (moduleName) => {
  const version = process.env.BUILD_VERSION;
  return import(`./${moduleName}.js?v=${version}`);
};

// 4. 类型安全的动态导入（TypeScript）
interface ModuleType {
  init: () => void;
  default: React.ComponentType;
}

const loadTypedModule = async (path: string): Promise<ModuleType> => {
  const module = await import(path);
  return module as ModuleType;
};

---

总结

动态导入的核心价值：

• 🚀 性能优化 - 代码分割，减少初始包大小

• 🎯 按需加载 - 根据条件加载所需功能

• 🔧 灵活架构 - 支持插件化、懒加载等模式

• ⚡ 用户体验 - 加快首屏加载，提升交互响应

使用建议：

• 对非关键功能使用动态导入

• 合理设置加载时机（交互前、空闲时、可视时）

• 实现完善的错误处理和降级方案

• 利用构建工具优化打包结果

动态导入是现代前端性能优化和架构设计的重要工具，正确使用可以显著提升应用性能和使用体验。

静态导入 vs 动态导入 使用场景对比

基础使用场景对比

场景分类	静态导入使用建议	动态导入使用建议	技术理由
应用核心功能	✅ 必须使用 - 主组件、核心工具函数、全局状态管理	❌ 避免使用	确保核心功能可靠加载，编译时优化
路由级别组件	❌ 不适用	✅ 推荐使用 - 页面级组件、路由对应模块	实现代码分割，按路由加载
第三方大型库	⚠️ 谨慎使用（如全量lodash）	✅ 推荐使用 - 按需加载大型库的特定功能	减少初始包体积，Tree-shaking优化
用户交互功能	❌ 不适用	✅ 推荐使用 - 模态框、复杂表单、图表组件	交互时加载，提升首屏性能

---

性能优化场景

优化目标	静态导入策略	动态导入策略	效果对比
首屏加载时间	只导入首屏必需模块	延迟加载非首屏组件	动态导入可减少60-80%初始包大小
缓存利用率	所有代码在一个bundle中	按功能拆分为多个chunk	动态导入提高缓存命中率
运行时内存	一次性加载所有模块	按需加载，及时清理	动态导入优化内存使用

代码示例对比

// ❌ 静态导入 - 所有组件一次性加载
import HomePage from './pages/Home';
import AboutPage from './pages/About';
import ContactPage from './pages/Contact';
import AdminPanel from './pages/Admin'; // 大多数用户用不到

// ✅ 动态导入 - 按需加载
const HomePage = lazy(() => import('./pages/Home'));
const AboutPage = lazy(() => import('./pages/About'));
const ContactPage = lazy(() => import('./pages/Contact'));
// AdminPanel 在用户成为管理员时再加载

---

业务功能场景

功能模块加载

业务场景	静态导入	动态导入	理由分析
用户权限相关	只导入基础权限功能	按权限动态加载高级功能	安全性和性能兼顾
数据分析报表	导入基础图表组件	动态加载复杂可视化库	大数据处理库体积较大
文件处理功能	导入基础文件操作	动态加载特定格式处理器	不同用户需要不同处理器
多语言国际化	导入默认语言包	动态加载其他语言包	用户通常只使用一种语言

// 权限相关的动态加载
async function loadAdminFeatures() {
  if (user.role === 'admin') {
    const [adminPanel, analytics, userManagement] = await Promise.all([
      import('./admin/AdminPanel'),
      import('./admin/AnalyticsDashboard'),
      import('./admin/UserManagement')
    ]);
    return { adminPanel, analytics, userManagement };
  }
  return null;
}

// 文件格式处理器的动态加载
async function loadFileProcessor(fileType) {
  switch (fileType) {
    case 'pdf':
      return await import('./processors/PDFProcessor');
    case 'excel':
      return await import('./processors/ExcelProcessor');
    case 'image':
      return await import('./processors/ImageProcessor');
    default:
      return await import('./processors/DefaultProcessor');
  }
}

---

用户体验优化场景

加载时机策略

加载策略	静态导入适用性	动态导入实现方式	用户体验影响
立即加载	✅ 核心功能、基础UI组件	❌ 不适用	确保基本功能可用
预加载	❌ 不适用	✅ import(/* webpackPrefetch: true */)	提前加载，使用时无延迟
交互时加载	❌ 不适用	✅ 点击/悬停时加载	按需加载，减少初始负担
可视区加载	❌ 不适用	✅ IntersectionObserver + 动态导入	滚动到可见区域时加载

// 交互时加载优化
function LazyChartComponent() {
  const [Chart, setChart] = useState(null);
  
  const loadChart = async () => {
    // 鼠标悬停时开始预加载
    const chartModule = await import(
      /* webpackPrefetch: true */
      './complex-chart-library'
    );
    setChart(() => chartModule.default);
  };

  return (
    <div onMouseEnter={loadChart}>
      {Chart ? <Chart data={data} /> : <div>悬停加载图表...</div>}
    </div>
  );
}

// 可视区加载
const LazyImageGallery = React.memo(() => {
  const [images, setImages] = useState([]);
  
  useEffect(() => {
    const observer = new IntersectionObserver(async (entries) => {
      if (entries[0].isIntersecting) {
        const imageModule = await import('./heavy-image-gallery');
        setImages(imageModule.default);
      }
    });
    
    observer.observe(document.getElementById('gallery-trigger'));
  }, []);

  return <div id="gallery-trigger">{images}</div>;
});

---

技术架构场景

项目结构决策

项目类型	静态导入比例	动态导入比例	架构考虑
SPA 单页应用	30-40% 核心代码	60-70% 路由和功能模块	路由级代码分割
MPA 多页应用	80-90% 页面内功能	10-20% 共享组件库	页面间代码共享
微前端架构	主应用核心	子应用全部动态加载	独立开发和部署
组件库开发	100% 源代码	0% 构建产物按需导入	Tree-shaking优化

微前端场景示例

// 主应用 - 静态导入核心框架
import React from 'react';
import { createMicroFrontendRouter } from './core/router';

// 子应用 - 全部动态导入
const AppRouter = () => {
  const [subApps, setSubApps] = useState({});
  
  const loadSubApp = async (appName) => {
    if (!subApps[appName]) {
      const app = await import(
        /* webpackIgnore: true */
        `https://cdn.com/apps/${appName}.js`
      );
      setSubApps(prev => ({ ...prev, [appName]: app }));
    }
  };
  
  return (
    <Router>
      <Route path="/admin" render={() => {
        loadSubApp('admin');
        return subApps.admin ? <subApps.admin /> : <Loading />;
      }} />
    </Router>
  );
};

---

错误边界和降级场景

健壮性处理

场景	静态导入处理	动态导入处理	最佳实践
模块加载失败	构建时报错	运行时错误，需要错误边界	动态导入必须包含错误处理
网络问题	不影响（打包在bundle中）	可能失败，需要重试机制	实现重试和降级方案
版本兼容性	构建时检查	运行时版本检测	动态导入支持多版本共存

// 动态导入的健壮性处理
class FeatureLoader {
  async loadWithFallback(featurePath, fallbackPath, maxRetries = 3) {
    for (let attempt = 1; attempt <= maxRetries; attempt++) {
      try {
        const module = await import(featurePath);
        return module;
      } catch (error) {
        console.warn(`加载 ${featurePath} 失败，尝试 ${attempt}/${maxRetries}`);
        
        if (attempt === maxRetries) {
          // 最终回退方案
          console.warn('使用降级方案');
          return await import(fallbackPath);
        }
        
        // 指数退避重试
        await new Promise(resolve => 
          setTimeout(resolve, 1000 * Math.pow(2, attempt))
        );
      }
    }
  }
}

// 使用示例
const chartLoader = new FeatureLoader();
const ChartComponent = await chartLoader.loadWithFallback(
  './advanced-charts',
  './basic-charts'
);

---

开发体验场景

开发阶段决策

开发阶段	静态导入优势	动态导入优势	建议策略
原型开发	✅ 快速迭代，简单直接	❌ 增加复杂度	全部使用静态导入
功能开发	✅ 类型提示，自动补全	⚠️ 部分IDE支持有限	核心功能静态，可选功能动态
性能优化	⚠️ 可能打包过大	✅ 按需加载优化	分析后针对性动态导入
团队协作	✅ 依赖关系明确	⚠️ 需要文档说明加载策略	制定团队规范

开发环境配置

// webpack.config.js - 开发和生产环境差异化配置
module.exports = (env) => {
  const isDevelopment = env === 'development';
  
  return {
    // 开发环境：减少动态导入以改善HMR体验
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins: [
                isDevelopment 
                  ? null  // 开发环境禁用动态导入分割
                  : '@babel/plugin-syntax-dynamic-import'
              ].filter(Boolean)
            }
          }
        }
      ]
    }
  };
};

---

综合决策指南

选择矩阵

决策因素	推荐静态导入	推荐动态导入	注意事项
模块使用频率	> 80% 用户会使用	< 20% 用户会使用	通过数据分析确定
模块体积大小	< 10KB	> 50KB	平衡网络请求和包大小
功能关键程度	核心功能，影响主要流程	辅助功能，可选功能	错误容忍度考虑
团队技术能力	所有技能水平	中级以上，能处理异步	培训成本考虑

决策流程图

新功能导入方式决策流程：
1. 是否应用启动必需？ → 是 → 静态导入
2. 是否所有用户都需要？ → 是 → 静态导入  
3. 模块体积是否 < 10KB？ → 是 → 静态导入
4. 是否路由级别组件？ → 是 → 动态导入
5. 是否用户交互触发？ → 是 → 动态导入
6. 是否权限控制功能？ → 是 → 动态导入
7. 默认 → 静态导入

---

总结建议

静态导入优先场景

• ✅ 核心业务逻辑

• ✅ 基础UI组件

• ✅ 工具函数库

• ✅ 类型定义文件

• ✅ 全局配置模块

动态导入优先场景

• ✅ 路由级别页面组件

• ✅ 大型第三方库

• ✅ 用户权限相关功能

• ✅ 复杂可视化图表

• ✅ 可选功能模块

混合使用策略

// 最佳实践：混合使用
// 静态导入 - 核心依赖
import React from 'react';
import { coreUtils } from './utils';

// 动态导入 - 可选功能
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
const AdminTools = React.lazy(() => import('./admin/Tools'));

// 按条件加载
if (user.needsAdvancedFeatures) {
  import('./advanced-features').then(module => {
    module.init();
  });
}

核心原则： 在保证核心功能可靠性的前提下，通过动态导入优化性能，在开发效率和运行时性能之间找到最佳平衡点。

ES6 静态导入语法规范详解

静态导入基本语法总览

导入类型	语法格式	示例	分号要求
命名导入	import { export1, export2 } from "module";	import { Button, Input } from 'antd';	✅ 必须
重命名导入	import { export1 as alias1 } from "module";	import { Button as Btn } from 'antd';	✅ 必须
默认导入	import defaultExport from "module";	import React from 'react';	✅ 必须
命名空间导入	import * as namespace from "module";	import * as utils from './utils';	✅ 必须
混合导入	import defaultExport, { export1 } from "module";	import React, { useState } from 'react';	✅ 必须
空导入	import "module";	import './styles.css';	✅ 必须
复合导入	export { export1 } from "module";	export { Button } from 'antd';	✅ 必须

---

详细语法规范分析

1. 命名导入 (Named Imports)

规范要点	说明	正确示例	错误示例
大括号要求	必须使用大括号包裹	import { useState } from 'react';	import useState from 'react'; ❌
逗号分隔	多个导出用逗号分隔	import { a, b, c } from './mod';	import { a b c } from './mod'; ❌
导出名匹配	必须与模块导出名完全匹配	import { UserModel } from './models';	import { Usermodel } from './models'; ❌
尾部逗号	允许尾部逗号	import { a, b, } from './mod';	-

// ✅ 正确的命名导入
import { useState, useEffect } from 'react';
import { 
  Button, 
  Input, 
  Select 
} from 'antd';

// ❌ 错误的命名导入
import { useState from 'react';           // 缺少右大括号
import useState, useEffect from 'react';  // 缺少大括号
import { useState useEffect } from 'react'; // 缺少逗号

2. 默认导入 (Default Imports)

规范要点	说明	正确示例	错误示例
无大括号	不能使用大括号	import React from 'react';	import { React } from 'react'; ❌
标识符命名	可以是任意合法标识符	import MyComponent from './Comp';	import 123Component from './Comp'; ❌
模块对应关系	默认导入对应的是模块的 export default

// ✅ 正确的默认导入
import React from 'react';
import MyApp from './App';
import Component from './Component.jsx';

// ❌ 错误的默认导入
import { React } from 'react';            // 错误：默认导入不能用大括号
import default from './mod';              // 错误：default是关键字
import 123 from './mod';                  // 错误：标识符不合法

3. 混合导入 (Mixed Imports)

规范要点	说明	语法模式	示例
顺序要求	默认导入在前，命名导入在后	import default, { named }	import React, { useState } from 'react';
逗号分隔	默认和命名部分用逗号分隔	import default, { named }	✅ 正确
大括号位置	命名部分必须用大括号	import default, { named }	✅ 正确

// ✅ 正确的混合导入
import React, { useState, useEffect } from 'react';
import axios, { AxiosError } from 'axios';
import App, { version } from './App';

// ❌ 错误的混合导入
import { useState }, React from 'react';      // 错误：顺序颠倒
import React { useState } from 'react';       // 错误：缺少逗号
import React, useState from 'react';          // 错误：命名导入缺少大括号

4. 命名空间导入 (Namespace Imports)

规范要点	说明	正确示例	错误示例
星号语法	必须使用 * as 语法	import * as utils from './utils';	import * utils from './utils'; ❌
访问方式	通过命名空间访问导出	utils.formatDate()	直接访问 formatDate() ❌
Tree-shaking	影响优化效果	所有导出都会被包含	建议按需导入

// ✅ 正确的命名空间导入
import * as React from 'react';
import * as lodash from 'lodash';
import * as utils from './utils';

// 使用方式
React.useState();
lodash.debounce();
utils.formatDate();

// ❌ 错误的命名空间导入
import * React from 'react';                 // 错误：缺少 as
import * as from './utils';                  // 错误：缺少命名空间标识符

导入导出对应关系

不同的导出方式对应不同的导入方式。

命名导出和默认导出的区别也反映在他们的导入上。

|------|--------|----------------------------------|----------------------------------------------|
| 导出方式 | 导入类型 | 正确导入语法 | 导入说明 |
| 默认导出 | 默认导入 | import identifier from "module"; | 不使用大括号 不使用 default 关键字 任意合法标识符 |
| 命名导出 | 命名导入 | import { name } from "module"; | 必须使用大括号 多个导出用逗号分隔 必须与模块导出名完全匹配（大小写敏感） 允许尾部逗号 |
| 任意导出 | 命名空间导入 | import * as ns from "module"; | 使用 * as 语法 通过命名空间访问ns.foo |

绝不能使用 import default from - 这是语法错误。

5. 仅副作用导入 (Side-effect Imports)

规范要点	说明	正确示例	错误示例
无绑定导入	只执行模块，不导入任何绑定	import './styles.css';	import styles from './styles.css'; ❌
模块执行	模块代码会被执行	适用于样式、polyfill等	-
顺序保证	按导入顺序执行	多个导入按代码顺序执行	-

// ✅ 正确的副作用导入
import './styles.css';                    // 导入CSS文件
import './polyfills.js';                  // 执行polyfill
import './analytics.js';                  // 初始化分析工具

// ❌ 错误的副作用导入（如果模块没有默认导出）
import styles from './styles.css';        // 错误：CSS通常没有默认导出

---

语法限制与约束

位置限制

限制类型	规范要求	正确示例	错误示例
模块顶层	必须在模块最外层	所有import在顶部	在函数内的import ❌
非嵌套	不能在块级作用域内	在文件顶层	在if语句内的import ❌
先于代码	必须在其他代码之前	import在逻辑代码前	逻辑代码在import前 ❌

// ✅ 正确的位置
import React from 'react';
import { render } from 'react-dom';

function App() {
  return <div>Hello</div>;
}

// ❌ 错误的位置
function App() {
  import React from 'react';              // 错误：在函数内
  return <div>Hello</div>;
}

if (condition) {
  import './mod';                         // 错误：在条件块内
}

console.log('test');
import React from 'react';                // 错误：在代码之后

字符串字面量要求

规范要点	说明	正确示例	错误示例
模块标识符	必须是字符串字面量	from 'react'	from someVariable ❌
路径格式	相对或绝对路径	from './utils'	-
扩展名可选	可以省略.js扩展名	from './utils'	-
模板字符串	不允许使用模板字符串	from './utils'	``from `./${path}``` ❌

// ✅ 正确的模块标识符
import React from 'react';
import utils from './utils';
import Component from '../components/Button';

// ❌ 错误的模块标识符
const modulePath = './utils';
import utils from modulePath;             // 错误：不是字符串字面量

const env = 'prod';
import config from `./config-${env}`;     // 错误：不能使用模板字符串

重复导入限制

限制类型	规范要求	示例	结果
相同来源	允许重复导入同一模块	import 'a'; import 'a';	模块只执行一次
相同绑定	不允许重复导入相同绑定	import { a } from 'm'; import { a } from 'm';	语法错误
默认导入	允许重复默认导入	import A from 'm'; import A from 'm';	语法错误

// ✅ 允许的重复导入
import './styles.css';
import './styles.css';                    // 允许：副作用导入

// ❌ 不允许的重复导入
import { useState } from 'react';
import { useState } from 'react';         // 错误：重复绑定

import React from 'react';
import React from 'react';                // 错误：重复默认导入

---

复合导出语法 (Re-export)

复合导出类型	语法	示例	等效写法
重导出所有	export * from "module";	export * from './components';	-
重导出命名	export { export1 } from "module";	export { Button } from 'antd';	import { Button } from 'antd'; export { Button };
重命名重导出	export { export1 as alias } from "module";	export { Button as Btn } from 'antd';	import { Button } from 'antd'; export { Button as Btn };
重导出默认	export { default } from "module";	export { default } from './App';	import App from './App'; export default App;

// ✅ 正确的复合导出
// components/index.js
export * from './Button';
export * from './Input';
export { Select } from './Select';
export { default as App } from './App';

// ❌ 错误的复合导出
export * from someVariable;               // 错误：不是字符串字面量
export { Button } from './Button.jsx';    // 注意：可能需要完整路径

---

实际应用最佳实践

导入组织规范

组织方式	推荐结构	说明
外部依赖	先导入第三方库	import React from 'react';
内部模块	再导入内部模块	import utils from '../utils';
相对路径	最后导入相对路径模块	import Component from './Component';
分组空行	用空行分组相关导入	提高可读性

// ✅ 推荐的导入组织
// 1. 外部依赖
import React from 'react';
import { useSelector } from 'react-redux';
import { Button, Input } from 'antd';

// 2. 工具和配置
import api from '@/utils/api';
import { formatDate } from '@/utils/helpers';

// 3. 类型定义
import type { User } from '@/types';

// 4. 组件和模块
import Header from './Header';
import Sidebar from './Sidebar';
import './styles.css';

路径别名规范

路径类型	示例	说明
相对路径	import './utils'	当前目录开始
绝对路径	import '/src/utils'	从根目录开始
别名路径	import '@/utils'	通过构建工具配置
Node.js 模块	import 'react'	从 node_modules 解析

---

总结

静态导入的核心规范：

• 📍 位置固定 - 必须在模块顶层，其他代码之前

• 🔤 字面量要求 - 模块路径必须是字符串字面量

• 🎯 语法严格 - 每种导入格式都有固定语法模式

• 🔒 编译时解析 - 依赖关系在编译时确定

• ⚠️ 错误早发现 - 语法错误在编译阶段就能发现

主要优势：

• 更好的 Tree-shaking 优化

• 明确的依赖关系

• 可靠的静态分析

• 更好的开发工具支持

静态导入为模块系统提供了可靠的基础，使得构建工具能够进行深度优化和静态分析。