Vite如何将CDN导入的外部ES6模块打包进构建产物

不需要修改现有代码中的导入语句，仅调整Vite配置即可达到效果，构建完成后程序运行时不会再从远程URL加载socket.io资源。

方法一：无需安装额外依赖，用Vite原生配置实现 #

适合只需要打包单个或少量固定CDN模块的场景。

1. 打开项目根目录的vite.config.js/vite.config.ts文件
2. 添加两处配置：
   • 把目标CDN地址加到optimizeDeps.include数组里，让Vite预构建阶段就把对应资源拉取到本地缓存
   • 改写rollup的外部资源判断规则，不要把要打包的这个CDN模块当成外部资源排除掉
3. 配置参考：

import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    include: [
      'https://unpkg.com/socket.io-client@4.5.1/dist/socket.io.esm.min.js'
    ]
  },
  build: {
    rollupOptions: {
      external: (id) => {
        // 其余HTTP/HTTPS资源如果需要保留CDN引用可继续标记为外部，仅排除要打包的目标地址
        return id.startsWith('http') && id !== 'https://unpkg.com/socket.io-client@4.5.1/dist/socket.io.esm.min.js'
      }
    }
  }
})

4. 改完配置先删掉node_modules/.vite缓存目录，再执行vite build即可，旧缓存可能会导致配置不生效。

方法二：用插件批量处理多个远程CDN导入 #

如果项目里有多个从CDN导入的ESM模块都要打包，不想逐个在配置里列地址，可以安装支持远程模块打包的Vite插件，配置完成后所有符合规则的远程ESM资源都会被自动拉取、解析，直接打进最终产物里，不用单独维护地址清单。

• 导入的CDN资源必须是ESM规范的版本，如果是UMD、CJS这类其他格式，Vite没法正常解析打包
• 执行构建的环境需要能正常访问对应的CDN地址，否则拉取资源失败会直接导致构建报错
• 如果远程模块本身依赖wasm、Web Worker这类独立的静态文件，这类资源不会被自动打包，需要单独添加配置处理
• 验证是否打包成功的方式很简单：构建完成后搜索产物文件里有没有原来写的CDN地址，搜不到、且能找到socket.io-client对应的源码逻辑，就说明配置生效了。

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