在前端开发中，Tree shaking 是指通过静态分析代码的方式，去除项目中未被使用的代码，从而减少最终打包后的文件大小。Webpack 提供了对 Tree shaking 的支持，可以帮助开发者优化项目的性能和加载速度。
如何启用 Tree shaking
要启用 webpack 的 Tree shaking 功能，需要确保以下条件：
- 使用 ES6 模块语法（import/export）来引入模块。
- 使用 webpack 2.x 以上版本。
- 在 webpack 配置文件中设置
mode为production模式。
示例 webpack 配置文件：
// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};Tree shaking 示例
假设有一个 math.js 模块，内容如下：
// www.javascriptcn.com code example
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export function multiply(a, b) {
return a * b;
}在 index.js 文件中，只引入 add 和 subtract 方法：
// index.js
import { add, subtract } from './math';
console.log(add(5, 3)); // 输出 8
console.log(subtract(5, 3)); // 输出 2通过 webpack 打包后，只会保留 add 和 subtract 方法，multiply 方法会被 Tree shaking 移除。
注意事项
- Tree shaking 只能移除未被使用的 ES6 模块导出，对于 CommonJS 模块导出无法进行 Tree shaking。
- 在开发过程中，建议使用 Tree shaking 来优化项目，但需要注意避免一些特殊情况下的代码优化错误。