与Vite捆绑远程模块

Question

我有一个 HTML 文件和一些脚本，可以直接从

esm.sh

加载一些模块，例如

import { x } from 'https://esm.sh/y'

使用 Vite 构建时，这些依赖项不会被下载/捆绑，因此当页面加载并执行脚本时，每个此类依赖项至少有一个额外的请求（通常会更多，因为它们会在

esm.sh

中反弹），显着降低页面加载速度。

我知道“标准”方法是简单地安装模块并让捆绑器正确捆绑它们。但我想知道是否有一种方法（例如 Vite 插件或某些配置）可以预先下载并捆绑所有此类依赖项。

Answer 1

是的，有一种方法可以将远程模块与Vite捆绑在一起。您可以使用 vite-plugin-remote-assets 插件。该插件将下载并捆绑所有远程资源，包括来自 esm.sh 的资源。

要使用该插件，请使用以下命令安装它：

npm install -D vite-plugin-remote-assets

然后，将以下行添加到您的 Vite 配置文件中：

plugins: ['vite-plugin-remote-assets']

您还可以配置插件来下载和捆绑特定资产，或排除某些资产。有关更多信息，请参阅插件文档：https://github.com/antfu/vite-plugin-remote-assets

以下是使用

vite-plugin-remote-assets

插件的 Vite 配置文件示例：

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

export default defineConfig({
  plugins: ['vite-plugin-remote-assets'],
  remoteAssets: {
    assets: [
      'https://esm.sh/y',
    ],
    outputDir: 'assets',
  },
})

或者如官方文档中所示：

// vite.config.ts
import RemoteAssets from 'vite-plugin-remote-assets'

export default {
  plugins: [
    RemoteAssets()
  ]
}

我希望这有帮助！