Global API changes (tree-shaking support)

Vue.js 3.0 introduced significant changes to its global APIs, with one of the core improvements being support for tree-shaking. This change not only optimizes bundle size but also fundamentally alters how developers use Vue's global APIs. Through explicit imports, unused APIs are automatically removed, significantly reducing the code volume in production environments.

Background of Global API Changes

In Vue 2.x, global APIs like Vue.nextTick and Vue.component were directly attached to the Vue constructor. This design meant that regardless of whether developers used these APIs, they would be included in the final bundle. For example:

// Vue 2.x global API usage
Vue.component('MyButton', {
  template: '<button>Click me</button>'
});

Vue.directive('focus', {
  inserted: el => el.focus()
});

This design was completely restructured in Vue 3.0. The new global APIs are now provided as independent ES module exports, allowing bundlers to identify and safely remove unused code.

New API Import Approach

Vue 3.0 splits global APIs into independent functions and provides them via named exports. For example:

// Vue 3.x explicit imports
import { nextTick, defineComponent } from 'vue';

nextTick(() => {
  console.log('DOM updated');
});

const MyButton = defineComponent({
  template: '<button>Click me</button>'
});

This change brings several key advantages:

1. On-demand imports: Only the APIs actually used are imported.
2. Tree-shaking friendly: Unused APIs are excluded from the final bundle.
3. Better code organization: Explicitly shows dependencies.

List of Affected Global APIs

The following table compares Vue 2.x global APIs with their Vue 3.x import equivalents:

Practical Application Example

Consider an application that only uses reactive functionality. In Vue 3, it can be optimized like this:

// Only import needed functionality
import { reactive, computed } from 'vue';

const state = reactive({
  count: 0,
  double: computed(() => state.count * 2)
});

function increment() {
  state.count++;
}

When bundled with webpack or Rollup, the final output will exclude unused code like the component system or directive system. In contrast, the equivalent Vue 2.x implementation would include the entire Vue runtime.

Migration Considerations

When migrating from Vue 2 to Vue 3, pay special attention to the following changes:

1. Global configuration changes:

   // Vue 2.x
   Vue.config.ignoredElements = ['custom-el'];
   
   // Vue 3.x
   import { config } from 'vue';
   config.isCustomElement = tag => tag.startsWith('custom-');
   

2. Plugin installation:

   // Vue 2.x
   Vue.use(MyPlugin);
   
   // Vue 3.x
   import { createApp } from 'vue';
   const app = createApp();
   app.use(MyPlugin);
   

3. Global API invocation:

   // Vue 2.x
   Vue.nextTick(() => {...});
   
   // Vue 3.x
   import { nextTick } from 'vue';
   nextTick(() => {...});
   

Measured Performance Impact

Actual project measurements show significant size optimizations due to tree-shaking support:

• Basic HelloWorld app: Reduced from ~22KB (Vue 2) to ~13KB (Vue 3)
• SPA using only reactive features: Reduced from ~24KB to ~15KB
• Large admin dashboard: Average reduction of 30-40% in Vue-related code volume

Synergy with Composition API

The new global API design works seamlessly with the Composition API, enabling more flexible code organization:

import { ref, onMounted } from 'vue';

export function useCounter() {
  const count = ref(0);
  
  onMounted(() => {
    console.log('Counter mounted');
  });
  
  function increment() {
    count.value++;
  }
  
  return { count, increment };
}

This pattern ensures only the APIs actually used are included in the final bundle, even when importing functions from large utility libraries.

Key Build Tool Configurations

To fully leverage tree-shaking, ensure proper build tool configuration:

1. webpack configuration:

   // webpack.config.js
   module.exports = {
     /*...*/
     optimization: {
       usedExports: true,
       sideEffects: true
     }
   };
   

2. Rollup configuration:

   // rollup.config.js
   export default {
     /*...*/
     treeshake: {
       moduleSideEffects: false
     }
   };
   

3. Ensure ESM format is used:

   // package.json
   {
     "module": "dist/vue.runtime.esm-bundler.js"
   }
   

Common Issue Solutions

1. "Global API is not defined" error:

   // Error: Using nextTick without importing it
   nextTick(() => {...});
   
   // Correct: Explicitly import before use
   import { nextTick } from 'vue';
   nextTick(() => {...});
   

2. Custom global properties:

   // Vue 2.x
   Vue.prototype.$http = axios;
   
   // Vue 3.x
   import { createApp } from 'vue';
   const app = createApp();
   app.config.globalProperties.$http = axios;
   

3. Missing type hints:

   // Ensure Vue 3 type definitions are used
   import { ref } from 'vue';
   const count = ref<number>(0);  // Explicit type parameter
   

Understanding the Implementation

Vue 3's global API changes are based on the static analysis features of ES modules. When a bundler detects the following pattern:

import { nextTick } from 'vue';

It tracks the actual usage of nextTick and removes it during production builds if unused. In contrast, Vue 2's global API implementation resembles:

class Vue {
  static nextTick() {...}
  static component() {...}
}

This pattern makes all APIs static properties of the Vue class, preventing static analysis tools from identifying and optimizing them.