为什么你的代码树摇不干净？

Tree-shaking，这个听起来hen玄乎的技术，其实就是帮你把没用的代码"摇掉"，让打包文件瘦身。但是！hen多时候我们自以为写得hen优雅的代码，却让 tree-shaking 直接罢工 😤。今天就来扒一扒那些年我们踩过的 tree-shaking 大坑，保证kan完之后你再也不会被这些"隐形杀手"坑到！

简单来说tree-shaking 就像一个超级挑剔的断舍离专家 🧹，它会仔细检查你的代码，把那些"买了但从来不穿的衣服"统统扔掉。它的工作原理其实hen简单：通过静态分析代码，确定哪些代码是真正被使用到的，哪些是没有被使用的，然后把没用的代码删除。

各位打工人，你们有没有遇到过这种情况：明明只用了一个小小的工具函数，打包出来的文件却大得离谱？🤯 这通常是因为我们的代码写法出了问题，导致 tree-shaking 失效。下面就来kankan那些常见的"坑爹"写法：

这是Zui经典的坑，没有之一！hen多同学到现在还在用 require 和 module.exports，然后疑惑为什么 tree-shaking 不工作...

// utils.js
function add {
  return a + b;
}
function multiply {
  return a * b;
}
// CommonJS 导出
module.exports = {
  add,
  multiply
};
// main.js
const { add } = require;
console.log);

为啥不行？CommonJS 是个"渣男"，说话不算话！它的 require 是运行时才执行的，tree-shaking 工具在编译时根本不知道你要加载什么只Neng选择"宁可错杀，不可放过"，把所有代码dou保留 🤷‍♂️。

✅ 正确写法

// utils.js
export function add {
  return a + b;
}
export function multiply {
  return a * b;
}
// main.js
import { add } from './utils';
console.log);

对象导出就像是"买一送一"活动，你本来只想要一个函数，结果整个对象的所有方法dou被强制塞给你了 🎁。

// utils.js
const mathUtils = {
  add {
    return a + b;
  },
  multiply {
    return a * b;
  }
};
export default mathUtils;
// main.js
import mathUtils from './utils';
console.log);

为啥不行？你这样写，tree-shaking 工具就懵了："这哥们要用哪个函数？我咋知道？算了算了全留着吧！" 😵‍💫。

✅ 正确写法

// utils.js
export function add {
  return a + b;
}
export function multiply {
  return a * b;
}
// main.js
import { add } from './utils';
console.log);

Class 就像一个"全家桶套餐"，你说你只要薯条，但人家必须给你汉堡、可乐一起打包。tree-shaking 没法把类拆开，只Neng整个保留 🍔。

// utils.js
export class Calculator {
  add {
    return a + b;
  }
  multiply {
    return a * b;
  }
  // 未使用的方法
  divide {
    return a / b;
  }
}
// main.js
import { Calculator } from './utils';
const calc = new Calculator;
console.log);

✅ 正确写法

// math.js
export function add {
  return a +b;
}
export function multiply {
return a *b ;
}
// main.js 
import { add } from './math' 
console.log)
 

. 👀 直接kan打包后的代码

创建测试文件验证

 // test-tree-shaking.js 
import { add } from './utils' ; 
console . log )

//构建后检查是否包含未使用的multiply函数 
 

. ⚙️正确配置构建工具

以 Webpack 为例：

 // webpack.configjs 
 module . exports = { 
 mode : 'production' , 
 optimization : { 
 usedExports : true , 
 sideEffects : false 
 } 
 } 

// package.json 
{ 
 "sideEffects" : false 
} 
 

🏆 Tree - shaking Zui佳实践 . 🎯拥抱 ES6 模块，告别石器时代

无脑使用 import / export ，把 require 扔进历史垃圾桶

千万别 CommonJS 和 ES6混着用，会出人命的！⚠️

. 🏷️给副作用贴个标签

{ "sideEffects": }

//使用支持tree - shaking的库 import{ debounce}from 'lodash-es';//或使用babel - plugin - import //.babelrc { "plugins": ]}

🎉写在Zui后

Tree - shaking这个技术说复杂也复杂，说简单也简单。关键是要理解它的“脾气”——它就像一个有洁癖的室友，喜欢干净整洁的代码，讨厌那些乱七八糟的写法。记住这些，你的打包文件就Neng瘦成一道闪电！⚡

为啥不行？ ：副作用就像是代码界的“熊孩子”，你永远不知道它会搞什么破坏。tree - shaking工具为了保险起见，只Neng选择不动它们。毕竟删错了代码，程序崩了锅还不是要我们背？🤪

Zui后的Zui后Ru果你觉得这篇文章对你有帮助，别忘了点赞收藏哦！毕竟好文章就应该被geng多人kan到 😉 。Tree - shaking这个技术听起来hen玄乎，其实就是帮你把没用的代码“摇掉”，让打包文件瘦身。但是！hen多时候我们自以为写得hen优雅的代码，却让tree - shaking直接罢工😤。今天就来扒一扒那些年我们踩过的tree - shaking大坑，保证kan完之后你再也不会被这些“隐形杀手”坑到！🎉👍💪