vite 默认不处理直接从 cdn（如 esm.sh）导入的远程模块，导致运行时动态请求、加载变慢。本文介绍通过 vite-plugin-remote-assets 插件，在构建阶段自动下载、本地化并打包这些远程 esm 依赖，实现零运行时网络请求、提升首屏性能。
vite 默认不处理直接从 cdn（如 esm.sh）导入的远程模块，导致运行时动态请求、加载变慢。本文介绍通过 vite-plugin-remote-assets 插件，在构建阶段自动下载、本地化并打包这些远程 esm 依赖，实现零运行时网络请求、提升首屏性能。
在现代前端开发中，直接从 esm.sh、skypack.dev 等 CDN 导入模块（如 import { x } from 'https://www.php.cn/link/8f047b38280e17991af74f09b722e28d'）虽便于快速原型验证，但会严重损害生产环境性能：每个远程 import 都会触发至少一次 HTTP 请求，且 CDN 内部重定向、缓存策略不可控，首屏加载延迟显著增加。Vite 作为原生 ESM 构建工具，默认仅解析本地 node_modules 或相对路径模块，对绝对 URL 导入视作外部资源（external），跳过解析与打包。
幸运的是，社区提供了成熟的解决方案——vite-plugin-remote-assets。该插件在 Vite 构建生命周期的 buildStart 阶段扫描源码中的远程 URL（支持 https:// 协议的 ESM 模块），自动发起预请求、缓存响应内容，并将其注入构建图谱，最终作为普通静态资源参与打包、哈希、代码分割等流程。
✅ 使用步骤如下：
-
安装插件（开发依赖）：
npm install -D vite-plugin-remote-assets # 或 yarn add -D vite-plugin-remote-assets
-
在 vite.config.ts（或 .js）中启用并配置：
import { defineConfig } from 'vite' import RemoteAssets from 'vite-plugin-remote-assets'
export default defineConfig({ plugins: [ RemoteAssets({ // 可选：显式声明需预取的远程模块（推荐用于精确控制） assets: [ 'https://www.php.cn/link/8f047b38280e17991af74f09b722e28d@1.2.3', 'https://www.php.cn/link/75d281aa6b0e43509bb8bf8d6e57ca28', ], // 可选：指定本地缓存输出目录（默认为 'public/remote-assets'） outputDir: 'public/remote-assets', // 可选：启用并发下载限制（防限流） concurrency: 5, // 可选：添加请求头（如授权访问私有 CDN） headers: { 'User-Agent': 'vite-remote-assets/1.0' } }) ] })
⚠️ **重要注意事项**： - 插件**不会重写源码中的 import 语句**；它通过 Vite 的 `resolveId` 和 `load` 钩子劫持远程 URL 请求，返回已下载的本地文件路径，因此你的源码可保持原样（无需改为相对路径）。 - 所有远程模块将被下载到 `outputDir` 并赋予唯一哈希文件名（如 `y-abc123.js`），确保长期缓存与版本隔离。 - 若模块存在副作用（如全局 polyfill），请确保其执行时机符合预期——插件默认按依赖顺序执行，与原始 import 语义一致。 - 生产构建后，请检查生成的 `dist/` 目录中是否包含对应远程模块文件，并验证浏览器 Network 面板无 `esm.sh` 域名请求。 ? **进阶提示**：对于大型项目，建议结合 `vite-plugin-importer` 或自定义插件，自动提取所有 `https://esm.sh/...` 字符串并注入 `assets` 列表，实现零手动维护。 通过此方案，你既能享受远程 ESM 的便捷性，又不失构建时的可控性与性能优势——真正实现“开发即上线”的高效交付闭环。
