如何从CDN加载vuetify/lib以最小化ESP32网站体积

我用售价1美元的ESP32搭建网站，闪存空间极小，必须尽可能压缩应用体积。目前已通过CDN加载所有依赖包，且网站启用了gzip压缩，Vite配置如下：

build: {
  rollupOptions: {
    external: ['vue', 'vue-router', 'pinia', 'vuetify', 'webfontloader', 'core-js', 'vuetify/styles'],
    output: {
      paths: {
        'vue-router': 'https://cdn.jsdelivr.net/npm/vue-router@4.5.0/dist/vue-router.global.min.js',
        vue: 'https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.global.min.js',
        pinia: 'https://cdn.jsdelivr.net/npm/pinia@2.3.0/dist/pinia.iife.min.js',
        vuetify: 'https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.js',
        'vuetify/styles': 'https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.css',
        webfontloader: 'https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.min.js',
        'core-js': 'https://cdn.jsdelivr.net/npm/core-js@3.39.0/proposals/reflect-metadata.min.js',
      }
    }
  }
},

分析代码映射后发现，vuetify/lib仍被打包进应用。尝试在rollupOptions.external中添加'vuetify/lib'条目，但无效果。请问如何让Vite从CDN加载vuetify/lib？

解决方案 #

1. 用正则匹配所有vuetify/lib相关路径 #

单纯添加'vuetify/lib'到external无法覆盖所有子路径（比如vuetify/lib/components/VBtn），需要用正则表达式匹配所有vuetify/lib开头的导入：

build: {
  rollupOptions: {
    external: [
      'vue', 
      'vue-router', 
      'pinia', 
      'vuetify', 
      'webfontloader', 
      'core-js', 
      'vuetify/styles',
      /^vuetify\/lib.*/ // 匹配所有vuetify/lib开头的模块路径
    ],
    output: {
      paths: {
        // 保留原有CDN路径配置
        'vue-router': 'https://cdn.jsdelivr.net/npm/vue-router@4.5.0/dist/vue-router.global.min.js',
        vue: 'https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.global.min.js',
        pinia: 'https://cdn.jsdelivr.net/npm/pinia@2.3.0/dist/pinia.iife.min.js',
        vuetify: 'https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.js',
        'vuetify/styles': 'https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.css',
        webfontloader: 'https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.min.js',
        'core-js': 'https://cdn.jsdelivr.net/npm/core-js@3.39.0/proposals/reflect-metadata.min.js',
      },
      // 配置全局变量映射，让Rollup将external模块指向CDN加载的全局对象
      globals: {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        pinia: 'Pinia',
        vuetify: 'Vuetify',
        // 所有vuetify/lib模块都映射到全局Vuetify对象
        '/^vuetify\/lib.*/': 'Vuetify'
      }
    }
  }
},

2. 禁用Vuetify自动导入插件 #

如果项目使用了unplugin-vue-components这类自动导入插件，它会自动生成vuetify/lib的导入语句，导致代码被打包。需要在插件配置中忽略Vuetify组件：

// 示例：修改unplugin-vue-components配置
Components({
  exclude: [/Vuetify.*/], // 忽略所有Vuetify组件的自动导入
})

3. 调整代码中的组件使用方式 #

CDN加载的Vuetify会将所有组件挂载到全局Vuetify对象下，且默认已注册所有组件到Vue。可直接在模板中使用组件，无需手动按需导入；若之前是手动导入，可改为从全局对象获取：

// 替换之前的按需导入
// import { VBtn } from 'vuetify/lib/components/VBtn'

// 改用全局对象
const VBtn = Vuetify.VBtn

4. 确保HTML中CDN脚本加载顺序正确 #

在index.html中按依赖顺序加载脚本，保证Vue先于Vuetify加载：

<!-- 先加载Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.global.min.js"></script>
<!-- 再加载Vuetify -->
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.js"></script>
<!-- 其他CDN脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue-router@4.5.0/dist/vue-router.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pinia@2.3.0/dist/pinia.iife.min.js"></script>

内容的提问来源于stack exchange，提问作者Jon Smirl