在构建大型 Web 应用时，掌握 JavaScript 模块导入的正确姿势至关重要。下面分享 9 个实用的导入技巧。
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')),
}
];
这些技巧能帮助写出更高质量的代码，提升应用性能。合理使用模块导入不仅能提高代码可维护性，还能优化应用加载速度。🚀
