webpack Tree shaking

在前端开发中，Tree shaking 是指通过静态分析代码的方式，去除项目中未被使用的代码，从而减少最终打包后的文件大小。Webpack 提供了对 Tree shaking 的支持，可以帮助开发者优化项目的性能和加载速度。

如何启用 Tree shaking

要启用 webpack 的 Tree shaking 功能，需要确保以下条件：

1. 使用 ES6 模块语法（import/export）来引入模块。
2. 使用 webpack 2.x 以上版本。
3. 在 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 来优化项目，但需要注意避免一些特殊情况下的代码优化错误。