Vue3 - Tree Shaking 摇树优化（它是什么？跟 Vue3 有什么关系？）

前言

目前呢，随着前端模块化、工程化发展日新月异，越来越像 webpack 这种构建工具已经开始崭露头角了，当然我们现在使用的 Vite 也是一款构建工具。

Tree Shaking 摇树 是什么？

拿 webpack 举例啊，它需要处理我们各模块之间的依赖关系，然后在内部构建一个依赖图(dependency graph)，最后形成一颗 “长满叶子的大树”。

了解了这颗 “大树” 后，咱们回过头来再看摇树，Tree Shaking 摇树呢是一个概念，更是一个术语，进入 webpack 官网，这是它的工作原理。

用大白话说，它本质是消除无用的 js 代码，咱们开发实际情况中，咱们的项目虽然依赖了某个模块，就比如我引入了 ElementUI 饿了么组件库，但很可能只使用一两个组件，并不会全部使用，这样就造成了资源浪费，俗称死代码。

当然，解决方案就是通过 Tree-Shaking 摇树，将没有使用的模块或代