面试题：JavaScript中ES6模块导入导出基础优化

Question

在JavaScript ES6模块中，有多种导入导出的方式，请列举至少两种不同的导出方式，并说明它们在使用场景上有什么区别。如果要优化模块导入导出以减少打包体积，在实际项目中你会采取哪些一般性的措施？

Answer 1

导出方式

1. 命名导出（Named Export）
   • 示例：export const variable = 1; 或 const variable = 1; export { variable };
   • 使用场景：当模块需要导出多个相关的变量、函数或类时，命名导出很有用。其他模块可以按需导入特定的导出项，使得模块间的接口清晰明了。例如，一个工具函数模块可能导出多个不同功能的函数，export function add(a, b) { return a + b; } export function subtract(a, b) { return a - b; }，使用该模块的代码可以 import { add, subtract } from './mathUtils.js'; 只导入需要的函数。
2. 默认导出（Default Export）
   • 示例：export default function() { console.log('This is a default export'); } 或 function myFunction() { console.log('This is a default export'); } export default myFunction;
   • 使用场景：当模块主要导出一个“主”实体，比如一个类、一个函数，使用默认导出更简洁。导入时不需要花括号，导入代码更简洁。例如一个用户模型模块，通常只导出一个用户类，class User { /*... */ } export default User;，导入时 import User from './User.js'; 。

优化模块导入导出减少打包体积的一般性措施

1. 按需导入：避免导入整个模块，而是只导入实际需要的部分。例如在上述数学工具模块中，只导入 add 函数而不是整个模块。
2. Tree - Shaking：利用支持 Tree - Shaking 的构建工具（如Webpack）。Tree - Shaking 会在打包时分析模块的导入导出，去除未使用的代码。要实现 Tree - Shaking，需确保代码使用 ES6 模块语法，并且构建工具配置正确。例如 Webpack 中，mode 设置为 production 时，默认开启一些 Tree - Shaking 相关优化。
3. 代码拆分：将大的模块拆分成更小的、功能单一的模块。这样每个模块只包含必要的代码，导入时也只导入所需小模块，减少整体打包体积。例如将一个大型的 UI 组件库拆分成多个独立的组件模块，页面只导入实际使用的组件模块。
4. 动态导入：使用 import() 语法进行动态导入。这允许代码在运行时按需加载模块，而不是在打包时全部包含。例如在路由场景中，只有当用户访问特定路由时才加载对应的组件模块，const myModule = () => import('./myModule.js'); 。