发布于 由admin

JS `Tree Shaking` 优化：编写可摇树代码与 `sideEffects` 配置

各位观众，晚上好！我是你们的老朋友，今天咱们聊聊一个前端性能优化的大杀器：Tree Shaking！这玩意儿听起来挺玄乎，但其实就是个“砍树”的过程，把JS代码里没用的部分砍掉，让你的页面加载更快。

欢迎来到“砍树”大会：Tree Shaking 及其 sideEffects 配置

今天咱们不讲高深理论，直接上实战，教大家如何编写可摇树的代码，以及如何配置 sideEffects，让Webpack等打包工具更好地“砍树”。

啥是Tree Shaking？

Tree Shaking，顾名思义，就是“摇树”。想象一下，你有一棵巨大的代码树，上面挂满了各种函数、变量、类等等。但是你的应用可能只用到其中一小部分，其他的部分就像树上的枯枝烂叶，白白占用空间。

Tree Shaking 的作用就是把这些没用的“枯枝烂叶”摇下来，减少最终打包文件的大小，从而提高页面加载速度。

简单来说，Tree Shaking 就是移除 JavaScript 代码中永远不会被执行的代码。

为什么需要Tree Shaking？

  • 减小打包体积： 这是最直接的好处。更小的体积意味着更快的下载速度。
  • 提高页面加载速度： 加载速度快了，用户体验自然就好了。
  • 节省带宽： 对于大量用户访问的网站，节省带宽也是一笔可观的成本。
  • 提高代码可维护性： 更小的代码库，意味着更少的bug，更容易维护。

如何编写可摇树的代码？

要让 Tree Shaking 发挥作用，首先得编写可摇树的代码。这主要遵循以下几个原则：

  1. 使用 ES Modules（import 和 export）： 这是 Tree Shaking 的基础。CommonJS ( require 和 module.exports) 在编译时难以确定哪些代码会被用到，所以Tree Shaking 对 CommonJS 的支持有限。

    错误示范 (CommonJS):

    // utils.js
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
};

// app.js
const utils = require('./utils.js');
console.log(utils.add(1, 2));

    正确示范 (ES Modules):

    // utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;

// app.js
import { add } from './utils.js';
console.log(add(1, 2));

    在这个例子中，如果使用 CommonJS，即使 app.js 只用了 add 函数，subtract 和 multiply 也会被打包进去。而使用 ES Modules，Webpack 可以识别出 subtract 和 multiply 没有被使用，从而将它们从最终的打包文件中移除。

  2. 避免副作用 (Side Effects)： 副作用是指函数或模块除了返回值之外，还修改了外部状态，例如修改全局变量、修改 DOM 等。 如果一个模块有副作用，Webpack 就无法确定它是否可以安全地移除。

    什么算副作用？

    • 修改全局变量
    • 修改函数参数（尤其是对象或数组）
    • 执行 DOM 操作
    • 发送网络请求
    • 修改 prototype

    错误示范 (有副作用):

    // utils.js
window.globalVariable = 'hello'; // 修改全局变量

export const add = (a, b) => a + b;

// app.js
import { add } from './utils.js';
console.log(add(1, 2));

    在这个例子中，utils.js 修改了全局变量 window.globalVariable，Webpack 无法确定这个修改是否会对其他模块产生影响，因此即使 app.js 没有直接使用 window.globalVariable，utils.js 也会被打包进去。

    正确示范 (无副作用):

    // utils.js
export const add = (a, b) => a + b;

// app.js
import { add } from './utils.js';
console.log(add(1, 2));

    在这个例子中，utils.js 没有副作用，Webpack 可以安全地移除它，如果 add 函数没有被使用。

  3. 尽量使用纯函数： 纯函数是指相同的输入永远产生相同的输出，并且没有任何副作用的函数。 纯函数更容易被 Tree Shaking 优化，因为它们的行为是可预测的。

    错误示范 (非纯函数):

    let counter = 0;
export const increment = () => {
  counter++;
  return counter;
};

    正确示范 (纯函数):

    export const increment = (counter) => {
  return counter + 1;
};

  4. 避免使用 eval() 和 new Function()： 这两个函数可以动态执行代码，使得静态分析变得困难，从而影响 Tree Shaking 的效果。

  5. 模块化设计： 将代码拆分成小的、独立的模块，每个模块只负责完成一个特定的功能。 这样可以提高代码的可读性和可维护性，也更容易进行 Tree Shaking。

sideEffects 配置：告诉 Webpack 哪些模块有副作用

即使你编写了可摇树的代码，Webpack 也不一定能完全识别出哪些模块可以安全地移除。 这时候，sideEffects 配置就派上用场了。

sideEffects 是一个在 package.json 文件中定义的属性，用于告诉 Webpack 哪些模块或文件有副作用。

sideEffects 的取值：

  • false：表示整个项目的所有模块都没有副作用。 这意味着 Webpack 可以安全地移除任何未使用的模块。 这是最激进的配置，只有在你确信你的项目没有任何副作用时才能使用。
  • 一个数组：表示只有数组中列出的模块或文件有副作用。 Webpack 只会保留这些模块，移除其他未使用的模块。
  • ["*.css", "*.scss"] : 这种情况通常是由于全局引入样式。

如何配置 sideEffects？

在你的 package.json 文件中添加 sideEffects 属性：

{
  "name": "my-project",
  "version": "1.0.0",
  "sideEffects": [
    "./src/global.css",
    "./src/polyfill.js"
  ],
  "devDependencies": {
    "webpack": "^5.0.0"
  }
}

在这个例子中，./src/global.css 和 ./src/polyfill.js 被标记为有副作用，即使它们没有被直接引用，Webpack 也会保留它们。

sideEffects: false 的风险：

如果你的项目实际上有副作用，但是你设置了 sideEffects: false，Webpack 可能会错误地移除一些必要的代码，导致你的应用出现问题。 因此，在使用 sideEffects: false 之前，一定要 тщательно 检查你的代码。

常见场景与示例

  1. UI 组件库： 很多 UI 组件库都提供了大量的组件，但你的应用可能只用到其中的几个。 通过 Tree Shaking，可以只打包你实际使用的组件，从而减小打包体积。

    例如： 你使用了 antd 组件库，但是只用到了 Button 和 Input 组件。

    // app.js
import { Button, Input } from 'antd';

const App = () => (
  <div>
    <Button type="primary">Hello</Button>
    <Input placeholder="World" />
  </div>
);

export default App;

    如果没有 Tree Shaking，antd 的所有组件都会被打包进去。 有了 Tree Shaking，只有 Button 和 Input 会被打包，其他组件会被移除。

  2. 工具函数库： 很多工具函数库都提供了大量的工具函数，但你的应用可能只用到其中的几个。 通过 Tree Shaking，可以只打包你实际使用的工具函数，从而减小打包体积。

    例如： 你使用了 lodash 工具库，但是只用到了 map 和 filter 函数。

    // app.js
import { map, filter } from 'lodash';

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = map(numbers, (n) => n * 2);
const evenNumbers = filter(doubledNumbers, (n) => n % 2 === 0);

console.log(evenNumbers);

    如果没有 Tree Shaking，lodash 的所有函数都会被打包进去。 有了 Tree Shaking，只有 map 和 filter 会被打包，其他函数会被移除。

  3. 全局样式： 有些样式文件会定义全局样式，这些样式可能会影响到整个应用的显示效果。 因此，即使这些样式文件没有被直接引用，也不能被 Tree Shaking 移除。

    例如： 你有一个 global.css 文件，定义了一些全局样式。

    /* global.css */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

    你需要在 package.json 文件中将 global.css 标记为有副作用：

    {
  "name": "my-project",
  "version": "1.0.0",
  "sideEffects": [
    "./src/global.css"
  ],
  "devDependencies": {
    "webpack": "^5.0.0"
  }
}

  4. polyfill: 一些 polyfill 会修改全局环境，因此也需要被标记为有副作用。

    例如： 你使用了 core-js 来提供 ES6+ 的兼容性。

    // polyfill.js
import 'core-js/stable';
import 'regenerator-runtime/runtime';

    你需要在 package.json 文件中将 polyfill.js 标记为有副作用：

    {
  "name": "my-project",
  "version": "1.0.0",
  "sideEffects": [
    "./src/polyfill.js"
  ],
  "devDependencies": {
    "webpack": "^5.0.0"
  }
}

Tree Shaking 的局限性

  • 动态导入 (Dynamic Imports): 虽然 Tree Shaking 可以处理静态导入，但对于动态导入，它的效果有限。 Webpack 会将动态导入的代码打包成单独的 chunk，但无法确定这些 chunk 中的代码是否会被使用。
  • 运行时副作用： 如果一个模块的副作用是在运行时产生的，Webpack 无法在编译时识别出来。 例如，一个模块根据用户的行为动态地修改全局变量。
  • 第三方库： 如果第三方库没有提供 ES Modules 版本，或者它们的 ES Modules 版本没有很好地支持 Tree Shaking，那么 Tree Shaking 的效果会受到影响。

实战演练：一个完整的示例

咱们来创建一个简单的项目，演示如何编写可摇树的代码，并配置 sideEffects。

项目结构：

my-project/
├── package.json
├── webpack.config.js
├── src/
│   ├── index.js
│   ├── utils.js
│   └── global.css

package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "sideEffects": [
    "./src/global.css"
  ],
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

webpack.config.js:

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  optimization: {
    usedExports: true,
  },
};

src/index.js:

import { add } from './utils.js';
import './global.css';

console.log(add(1, 2));

src/utils.js:

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

src/global.css:

body {
  font-family: sans-serif;
}

分析：

  • utils.js 使用了 ES Modules，导出了 add 和 subtract 函数。
  • index.js 只使用了 add 函数，subtract 函数没有被使用。
  • global.css 定义了全局样式，需要被保留。
  • package.json 中配置了 sideEffects，将 global.css 标记为有副作用。
  • webpack.config.js 中开启了 usedExports 选项，这是 Tree Shaking 的关键。

运行 npm run build 命令，Webpack 会进行打包。

结果：

最终的 bundle.js 文件中只包含了 add 函数和 global.css 的样式，subtract 函数被成功地移除。 这说明 Tree Shaking 起作用了！

小结与最佳实践

  • 拥抱 ES Modules： 这是 Tree Shaking 的基础。
  • 避免副作用： 尽量编写纯函数，减少副作用。
  • 合理配置 sideEffects： 准确地告诉 Webpack 哪些模块有副作用。
  • 使用最新的 Webpack 版本： 新版本的 Webpack 对 Tree Shaking 的支持更好。
  • 定期检查打包体积： 使用 Webpack Bundle Analyzer 等工具，分析打包体积，找出可以优化的地方。

总结

Tree Shaking 是一个强大的前端性能优化技术，可以有效地减小打包体积，提高页面加载速度。 但是，要让 Tree Shaking 发挥作用，需要遵循一定的原则，编写可摇树的代码，并合理配置 sideEffects。

希望今天的分享能帮助大家更好地理解和应用 Tree Shaking，让我们的前端应用飞起来！

感谢大家的观看，下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注