面试题：JavaScript ES6模块特性之高级难度

模块加载静态性的含义

在ES6模块中，模块的加载是静态的，意味着在编译阶段（而非运行时）就能确定模块的依赖关系和导出内容。这是因为ES6模块的导入和导出语句在模块的顶层作用域使用，而且位置固定，不能在条件语句、函数内部等动态环境中使用。例如：

// 正确，静态导入
import { func } from './module.js'; 

// 错误，不能动态导入
if (condition) {
    import { func } from './module.js'; 
}

这样一来，工具（如webpack等打包工具）可以在编译时分析模块的依赖关系，了解哪些模块被导入、哪些导出被使用，为优化提供可能。

Tree - shaking原理

原理基础：基于ES6模块加载的静态性，工具可以分析出哪些导出实际上在其他模块中被使用，哪些没有被使用。没有被使用的导出（即“死代码”）可以在打包过程中被剔除，从而减小打包后的文件体积。例如，假设有一个模块mathUtils.js：

// mathUtils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const unusedFunction = () => console.log('This function is not used');

在另一个模块main.js中：

// main.js
import { add } from './mathUtils.js';
console.log(add(2, 3));

由于main.js只使用了add函数，工具在打包时可以根据静态分析知道subtract和unusedFunction没有被使用，从而可以将它们从打包结果中移除。

实现步骤

使用支持Tree - shaking的打包工具：如webpack（从2.x版本开始支持）、Rollup等。以webpack为例，需要确保使用合适的配置。
配置模式：将webpack的mode设置为'production'。在生产模式下，webpack默认启用一些优化，包括对Tree - shaking的支持。例如在webpack.config.js中：

module.exports = {
    mode: 'production',
    // 其他配置...
};

ES6模块使用：确保项目中的模块都使用ES6模块语法进行导入和导出。如果使用CommonJS等其他模块系统，Tree - shaking无法正常工作。
优化配置：对于更复杂的项目，可能需要进一步配置，如设置optimization.minimize为true（生产模式下默认开启），并且确保terser - webpack - plugin（默认的压缩插件）正确配置，该插件会在压缩代码时执行Tree - shaking，移除未使用的代码。

Rollup在实现Tree - shaking方面更为直接和高效，因为它的设计初衷就是专注于ES6模块的打包和优化。使用Rollup时，同样确保项目使用ES6模块语法，通过配置文件或命令行参数指定入口文件、输出文件等，Rollup会自动进行Tree - shaking优化。

面试题：JavaScript ES6模块特性之高级难度

知识考点

面试题答案

模块加载静态性的含义

Tree - shaking原理

实现步骤