打包优化（可摇树优化）

什么叫可摇树优化

• 摇树是一种消除死代码的方法。这个词最初是由 Rollup 发起的，并逐渐流行开来，但消除死代码的概念却早已存在。webpack 中也涉及了这个概念。
• 应用程序的依赖项是树状结构。树中的每个节点都代表了一个依赖项，这些依赖项为应用程序提供了不同的功能。我们通过消除不需要的依赖项来减少树的节点。这个过程叫摇树
• 早期我们开发的应用程序依赖项比较少，随着后续的开发树节点越来越多且有很多的节点我们可能已经不需要了
• 摇树优化 基于webpack2.0来实现的

具体代码实例

• 用 export default 导出的不可摇树 ，下属示例中即使我们不需要 c 和 d。但是他任然会被输出到 JavaScript 客户端

export default {
  a: xxx,
  b: xxx,
  c: xxx,
  d: xxx
}

import test from 'xxx'
test.a()
test.b()

上述实例 页面不需要c和d 但是任然被打包

• 用 export 可以摇树 按需加载 ，打包时会自动剔除c d 变量

export const a: xxx
export const b: xxx
export const c: xxx
export const d: xxx


import { a, b } from 'xxx'
// {a ,b} 类似结构赋值但是和解构赋值不一样
// 如果是 export default 导出 这样引用会报错

上述实例 页面不需要c和d 但是任然被打包

问题

• 看到vue3的核心特性

vue的树摇（tree-shaking）

• vue2存在的问题
• 不少global-api是作为静态函数直接挂在构造函数上，例如Vue.nextTick()，如果我们从未在代码中使用它们，就会形成所谓的dead code ，这类global-api 造成的dead code 无法使用webpack 的tree-shaking 去除掉。

import Vue from 'vue';
Vue.nextTick(() => {
	// something DOM-related
})

• vue3 中做了相应的变化，将这些方法抽取为独立的函数，这样打包工具的摇树优化可以将这些dead code 去除掉

import {nextTick} from 'vue';
nextTick(() => {
	// something DOM-related
})
// Vue.nextTick
// Vue.observable (replaced by Vue。reactive)
// Vue.version
// Vue.compile (only in full builds)
// Vue.set(only in compat builds)
// Vue.delete (only in compat builds)

具体怎么使用

• 如果是webpack创建的项目
• 在webpack.config.js中mode=‘none’时，默认关闭
• 在webpack.config.js中mode=‘production’时，默认开启
• 只会注入已使用的函数，未使用的函数不会注入到bundel.js中
• 如果是vue创建的项目 是默认开启的
• 应该是在vue.config.js 上配置的

参考的文章

tree-shaking.
打包后的代码.

总结

• 我们的应用程序采用应该采用按需加载的方式导出 也就是export 的方式导出
• 一个模块只导出一个程序的时候，使用 export default。导出多个模块的时候使用 export
• 或者干脆所有的模块导出的时候都使用 export
• 理论上一些方法 变量如果没有引用在开发的时候就应该删除，但是项目周期长，需求变动，维护成本高 ，