洞悉Webpack高级优化特性：Tree Shaking与sideEffects

2023-10-29 01:31:46

Webpack 打包优化是一种精细的技术活儿，它没有固定的模式，一般常见的优化就是拆包、分块、压缩等，这些优化方法大家都耳熟能详，我这里就不再赘述了。

今天这篇文章，我来介绍用来优化 Webpack 打包的两个高级特性：Tree Shaking 和 sideEffects。

一、Tree Shaking

Tree Shaking 的核心思想是，它会从最终打包生成的 JavaScript 代码中摇掉没有用到的代码，这可以有效地减少打包文件的大小。

Tree Shaking 的工作原理是，它会分析代码中的依赖关系，并根据这些依赖关系确定哪些代码是必要的，哪些代码是不必要的。

// index.js
import { foo, bar } from './moduleA';

// moduleA.js
export function foo() {
  console.log('foo');
}

export function bar() {
  console.log('bar');
}

在这个例子中，如果我们只在 index.js 中使用了 foo 函数，那么 bar 函数就会被 Tree Shaking 摇掉。

二、sideEffects

sideEffects 的意思是“副作用”，它指的是函数在执行时可能会产生除了返回结果之外的其他影响，比如修改全局变量、发出 HTTP 请求等。

Webpack 可以通过 sideEffects 来优化打包结果，它会根据函数是否有副作用来决定是否将其打包到最终的 JavaScript 代码中。

// index.js
import { foo, bar } from './moduleB';

// moduleB.js
export function foo() {
  // 没有副作用
}

export function bar() {
  // 有副作用
  console.log('bar');
}

在这个例子中，如果我们只在 index.js 中使用了 foo 函数，那么 bar 函数就会被 sideEffects 优化掉，因为它有副作用，而我们并没有在 index.js 中使用它。

三、实际应用

// webpack.config.js
const webpackConfig = {
  // ...
  optimization: {
    usedExports: true, // 启用 Tree Shaking
    sideEffects: true, // 启用 sideEffects
  },
  // ...
};