Vue编译时标志：__VUE_OPTIONS_API__对构建体积的影响

结论：影响可以忽略不计，如果项目对空间敏感（如嵌入式系统）且不使用选项式API，可以考虑开启

前言

最近在看Vue文档时，发现个能减少构建体积的配置：

众所周知，现在大部分使用 Vue3 的项目（尤其是大型项目），基本上都只用 Vue3 的组合式 API (Composition API) 了

但博主在网上查了一下，好像没有人测试过实际上能减少多少构建产物体积，故准备建个新项目试一下

过程

创建新项目

创建新项目用的是Vue的官方项目脚手架 create-vue ，安装完依赖后，执行 dev 命令

这样就成功创建了一个新项目

构建项目

执行 build 命令，此时打包出的 dist 文件大小如下：

可以看到此时的大小为 103KB

配置Vite

按照 Vue 的官方文档，在 Vite 配置中加上 __VUE_OPTIONS_API__: 'false' ，如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  // 添加的配置，用于禁用选项 API
  define: {
    __VUE_OPTIONS_API__: 'false'
  }
})

再次构建

再次构建项目，此时的 dist 文件大小：

可以看到这时大小为 98.4KB ，对比上面的结果仅仅少了 4.6KB

在已有项目中尝试

这里直接放打包结果对比，原体积：

加上 __VUE_OPTIONS_API__: 'false' 后的体积：

可以看到体积还是只小了几 KB ，说明确实只减少了一点点体积

总结

这个配置对构建体积的影响可以忽略不计，如果项目对空间敏感（如嵌入式系统）且不使用选项式API，可以考虑开启

++cold_knowledge