什么是treeshaking

• Tree Shaking ，将没有使用的方法摇掉，这样来达到删除无用代码的目的。
• Tree shaking 是一种用于优化 JavaScript 代码的技术，它可以帮助去除未使用的代码，以减少最终打包文件的大小

Tree Shaking 的原理（webpack）

• 依赖Es6 Module语法（import和export），做静态分析
• Common js 支持动态加载模块，在加载前无法确定模块是否被调用
• Tree Shaking 在去除代码冗余的过程中，程序会从入口文件出发，扫描所有的模块依赖，以及模块的子依赖，然后将它们链接起来形成一个 “抽象语法树” (AST)。
• 随后，运行所有代码，查看哪些代码是用到过的，做好标记。
• 最后，再将“抽象语法树”中没有用到的代码“摇落”。经历这样一个过程后，就去除了没有用到的代码。

Tree Shaking 的原理（vue）

• 在 Vue 中的 Tree shaking 则是基于 Rollup 实现的。Vue 的官方构建工具 Vue CLI 会使用 Rollup 来进行项目的打包工作，其中包括 Tree shaking。
• Vue 的构建工具会根据代码的模块依赖关系和使用情况来识别和去除未使用的代码，以减小最终构建文件的大小。

总的来说，无论是在 Webpack 还是在 Vue 中，Tree shaking 的目标都是相同的，即通过去除未使用的代码来优化最终打包文件的体积。区别在于实现的方式和工具不同，Webpack 使用自身的机制实现 Tree shaking，而 Vue 则借助 Rollup 来实现这一功能。