在 Vite 与 Webpack 中外部化依赖

如果页面已经从 CDN 加载了某个库，可以让打包工具不再重复打包同一份依赖。以下示例使用 Vue 3.5.13。

Vite

Vite 应用默认输出 ES 模块，外部化后产物中会保留 import ... from 'vue'。浏览器需要通过 import map 知道 vue 对应的地址，因此要引用 Vue 的 ESM 构建：

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      // 不把 vue 打进产物
      external: ['vue'],
    },
  },
});

<script type="importmap">
  {
    "imports": {
      "vue": "https://s4.zstatic.net/npm/vue@3.5.13/dist/vue.esm-browser.prod.js"
    }
  }
</script>

import map 需要放在业务模块脚本之前。external 只作用于 vite build，开发服务器仍使用本地安装的依赖，两边请保持同一版本。

Webpack

Webpack 可以把依赖映射到页面上的全局变量，这时引用 Vue 的全局构建：

// webpack.config.js
module.exports = {
  externals: {
    vue: 'Vue',
  },
};

<script src="https://s4.zstatic.net/ajax/libs/vue/3.5.13/vue.global.prod.js"></script>

配置后，代码中的 import { createApp } from 'vue' 会使用页面上的 Vue 全局变量，构建产物中不再包含 Vue 本体。请确保 CDN 的 <script> 位于业务脚本之前。