乐趣区

关于javascript:Vue3全局Api支持treeshaking后的一些变更

jiezi

全局 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.x
import Vue from 'vue'
Vue.nextTick(() => {// 一些和 DOM 无关的货色})
// 3.x
import {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 'vue

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

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

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

在插件中的用法 

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

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

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

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

// rollup.config.js
export default {
  /*...*/
  external: ['vue']
}
退出移动版