全局Api目前反对tree-shaking

2.x不反对tree-shaking

tree-shaking，即死代码打消，然而因为2.x的一些api，如Vue.nextTick()办法，即便不被应用，也会被最终打包

3.x中反对了tree-shaking所引起的变动

在 Vue 3 中，全局和外部 API 都通过了重构，并思考到了 tree-shaking 的反对。因而，全局 API 当初只能作为 ES 模块构建的命名导出进行拜访。

// 2.ximport Vue from 'vue'Vue.nextTick(() => {  // 一些和DOM无关的货色})// 3.ximport { nextTick } from 'vue'nextTick(() => {  // ...})

间接调用Vue.nextTick()将会导致undefined is not a function
通过这一更改，Vue应用程序中未应用的全局api将从最终捆绑包中打消，从而获得最佳文件大小

受到影响的Api

  • Vue.nextTick
  • vue.observable
  • Vue.version
  • Vue.compile
  • Vue.set
  • vue.delete

外部帮忙器

除了公共api，许多外部组件/帮忙其当初也被导出为命名导出，只有当编译器的输入是这些个性时，才容许编译器导入这些个性

<transition>  <div v-show="ok">hello</div></transition>

将会被编译为

import { h, Transition, withDirectives, vShow } from 'vueexport function render() {  return h(Transition, [withDirectives(h('div', 'hello'), [[vShow, this.ok]])])}

这意味着只有在应用程序理论应用了Transition组件的时候才会导入他

以上仅实用于 ES Modules builds，用于反对 tree-shaking 的绑定器——UMD 构建依然包含所有个性，并裸露 Vue 全局变量上的所有内容 (编译器将生成适当的输入，以应用全局外的 api 而不是导入)。

在插件中的用法

// 2.xconst plugin = {  install: Vue => {    Vue.nextTick(() => {      // ...    })  }}// 3.ximport { nextTick } from 'vue'const plugin = {  install: app => {    nextTick(() => {      // ...    })  }}

如果应用 webpack 这样的模块捆绑包，这可能会导致 Vue 的源代码绑定到插件中，而且通常状况下，这并不是你所冀望的。避免这种状况产生的一种常见做法是配置模块绑定器以将 Vue 从最终捆绑中排除。对于 webpack，你能够应用 externals 配置选项：

// webpack.config.jsmodule.exports = {  externals: {    vue: 'Vue'  }}// 这将会通知webpack将Vue模块视为一个内部库，而不是捆绑他

如果你抉择的模块绑定器恰好是 Rollup，你基本上能够收费取得雷同的成果，因为默认状况下，Rollup 会将相对模块 id (在咱们的例子中为 'vue') 作为内部依赖项，而不会将它们蕴含在最终的 bundle 中。然而在绑定期间，它可能会收回一个“将 vue 作为内部依赖” 正告，可应用 external 选项克制该正告：

// rollup.config.jsexport default {  /*...*/  external: ['vue']}