【源码】vue3 为什么说打包体积更小

【公司内部分享】探索Vue.js框架内部原理和实现机制，旨在理解其核心概念和技术细节，以便更好地应用和定制Vue.js。

相关文章

• vue3 为什么说渲染、更新更快、内存占用更少
• vue3 为什么说打包体积更小
• vue3 为什么说跨平台能力更强
• vue2 项目结构与架构设计介绍
• vue2 变化侦测与异步更新源码刨析
• vue2 模板编译源码刨析
• vue2 patch源码刨析
• vuex4 源码浅析

vue3 为什么说打包体积更小

---

一、模块化设计

Monolithic 架构 与 Modular 架构

• 在 Vue 2 中，整个框架是以 monolithic 架构为基础构建的。这意味着 Vue 2 的核心功能和特性都打包在一个文件中，开发者一般需要一次性引入完整的 Vue.js 文件，包括模板编译器、响应式系统、虚拟 DOM 等所有功能。

• Vue 3 采用了更加模块化的设计。它将核心功能拆分为多个独立的模块，开发者可以按需引入需要的功能。这种模块化设计使得 Vue 3 的体积更小、更加灵活。

Options API 与 Composition API

• Vue 2 主要使用 Options API 来组织组件的逻辑。这种方式下，组件的各种选项（如 data、methods、computed、watch 等）都定义在一个对象中。

  // main.js
  import Vue from 'vue';
  
  new Vue({
  el: '#app',
  data: {
      message: 'Hello Vue!'
  },
  template: '<div>{{ message }}</div>'
  });

  在 Vue 2 中，我们通过导入整个 Vue.js 库来使用其全局 API。虽然我们只使用了响应式系统和组件系统，但是整个 Vue.js 库都会被打包到我们的应用程序中。

• Vue 3 引入了 Composition API，它是一种基于函数的 API，使得组件的逻辑可以更加灵活地组织和复用。开发者可以根据需要组合逻辑，而不再受到 Options API 的限制。

  // main.js
  import { createApp, ref } from 'vue';
  
  const app = createApp({
      template: '<div>{{ message }}</div>'
  });
  
  const message = ref('Hello Vue!');
  app.provide('message', message);
  
  app.mount('#app');

  在 Vue 3 中，我们只导入了需要的全局 API，例如 createApp 和 ref。这两个功能分别用于创建 Vue 应用程序实例和定义响应式数据。通过这种方式，我们只会将用到的功能打包到我们的应用程序中，而不会打包整个 Vue.js 库。

ES5 和 CommonJS 与 ES Module

• Vue 2 默认支持 ES5 和 CommonJS 规范的模块化方式。这使得 Vue 2 可以在浏览器环境和 Node.js 环境中进行使用。

• Vue 3 默认采用 ES Module 规范，这使得 Vue 3 更加适用于现代的 JavaScript 生态系统。开发者可以使用 import/export 语法来导入和导出 Vue 3 的模块。

二、Tree-Shaking 支持

Vue 3 对 Tree-Shaking 有更好的支持，可以在打包过程中移除未使用的代码，从而进一步减小最终打包产物的体积。这得益于 Vue 3 的模块化设计和 ES Module 的支持。

三、逐步渐进式升级

Vue 3 提供了对 Vue 2 的逐步渐进式升级支持。这使得开发者可以在现有项目中逐步引入 Vue 3 的功能，而不需要一次性进行完全的迁移。