后悔没有早点知道的 9 个 JavaScript 导入事项

在构建大型 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 (
}>


);
}
实际案例
// 优化路由加载
const routes = [
{
path: ‘/dashboard’,
component: React.lazy(() => import(‘./pages/Dashboard’)),
},
{
path: ‘/profile’,
component: React.lazy(() => import(‘./pages/Profile’)),
}
];
这些技巧能帮助写出更高质量的代码，提升应用性能。合理使用模块导入不仅能提高代码可维护性，还能优化应用加载速度。🚀

最后：
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
VueUse源码解读