JavaScript 模块导入技巧总结

在构建大型 Web 应用程序时，掌握正确的 JavaScript 模块导入方法至关重要。以下是九个实用的导入技巧，供您参考。

1. 命名导入 vs 默认导入

命名导入

适用于从模块中选择性导入特定内容：

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math';

默认导入

每个模块只能有一个默认导出：

// user.js
export default class User {
  // ...
}

// main.js
import MyUser from './user'; // 可以使用任意名称

2. 命名空间导入

将模块所有导出内容作为一个对象引入：

// utils.js
export const format = () => {};
export const validate = () => {};
export default class Helper {};

// main.js
import * as Utils from './utils';
Utils.format();
Utils.validate();
const helper = new Utils.default();

3. 副作用导入

用于执行模块代码而不导入任何内容：

// polyfill.js
if (!String.prototype.includes) {
  String.prototype.includes = function(search) {
    return this.indexOf(search) !== -1;
  };
}

// main.js
import './polyfill'; // 仅执行模块代码

4. 动态导入

根据运行时条件按需加载模块：

async function loadModule() {
  if (process.env.NODE_ENV === 'development') {
    const { DevTools } = await import('./devtools');
    return new DevTools();
  }
  return null;
}

5. 使用命名导出提高可维护性

// 不推荐
export default {
  add,
  subtract,
  multiply
};

// 推荐
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;

6. Barrel 文件统一导出

使用索引文件统一管理导出：

// components/index.js
export { Button } from './Button';
export { Input } from './Input';
export { Select } from './Select';

// 使用时
import { Button, Input, Select } from './components';

7. 保持导入顺序一致

推荐的导入顺序：

// 1. React 相关
import React, { useState } from 'react';

// 2. 第三方库
import axios from 'axios';
import classnames from 'classnames';

// 3. 本地组件
import { Button } from '@/components';

// 4. 工具函数
import { formatDate } from '@/utils';

// 5. 样式文件
import styles from './index.module.css';

8. 避免循环依赖

使用工具检测并重构循环依赖：

// ESLint 配置
{
  "rules": {
    "import/no-cycle": "error"
  }
}

9. React.lazy 实现代码分割

// 按需加载大型组件
const Dashboard = React.lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Dashboard />
    </Suspense>
  );
}

实际案例

// 优化路由加载
const routes = [
  {
    path: '/dashboard',
    component: React.lazy(() => import('./pages/Dashboard')),
  },
  {
    path: '/profile',
    component: React.lazy(() => import('./pages/Profile')),
  }
];

这些技巧能帮助写出更高质量的代码，提升应用性能。合理使用模块导入不仅能提高代码可维护性，还能优化应用加载速度。