Tree-shaking摇树优化

是一种在打包时移除JavaScript中未使用代码的技术。它的名字很形象：就像摇动一棵树，把枯叶（未使用的代码）摇下来，只留下有用的树叶。

vue2和vue3的Tree-shaking对比

• vue2，是UMD/CJS模块，所有API挂在Vue对象上，构建工具无法分析哪些被使用了

• import Vue from 'vue'
  
  Vue.nextTick(() => {})
  Vue.use(router)
  Vue.directive('focus', {})
  
  // 打包时，即使只使用了一小部分API，也是整个Vue打包，包括Vue.set()、Vue.filter()、Vue.delete()
  

• vue3，完美支持Tree-shaking，Vue3是ES Module模块，API被拆分为独立导出，构建工具可以精确分析依赖。最终打包时体积显著减少，特别是对于只使用部分功能的项目。
  Tree-shaking让“按需打包”成为可能，是现代前端工程化的基石之一

• import { createApp, nextTick } form 'vue'  // 按需导入
  
  const app = createApp(App)
  nextTick(() => {})
  
  // 打包时，只打包 createApp, nextTick 这俩API
  

实际项目中除了vue3的Tree-shaking示例

• lodash

• import { debounce, cloneDeep } from 'lodash'
  debounce(handleClick, 300)
  

• Element UI 组件库

• import { Button, Dialog } from 'element-ui'