如何将模块外部化

如果您的应用程序中包含一些由第三方库提供的模块，您可能想将这些模块外部化以减少代码打包的大小。这可以通过在rollup配置中显式地指定外部化模块来实现。本文将向您介绍如何使用 build.rollupOptions.external 选项来实现此目的。

build.rollupOptions.external 选项

build.rollupOptions.external 是一个Rollup配置选项，用于指定哪些模块应该被外部化。在默认情况下，Rollup会将所有模块打包到输出文件中，但是通过指定 external 选项，您可以告诉Rollup应该留下哪些模块。

指定要外部化的模块

使用 build.rollupOptions.external 选项将模块外部化的基本方法是将这些模块的名称添加到一个数组中。例如，如果您想将 lodash 库外部化，您可以这样配置：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      external: ['lodash']
    }
  }
}

这将告诉Rollup不将 lodash 打包进您的应用程序代码中，而是将其视为外部模块，并在打包后的文件中留下对它们的引用。当您的应用程序运行时，它将从外部获取 lodash 模块，而不是从打包生成的文件中获取。

引入外部模块

如果您想在您的应用程序中使用一个外部化的模块，您需要确保它在运行时可用并正确地加载。有几种方法可以实现这一点，这里我们将介绍两种。

通过 CDN 引入外部模块

一种简单的方法是通过CDN引入外部模块。许多流行的库都提供了在CDN上托管的版本，您可以使用这些版本来在您的应用程序中加载这些库。例如，如果您想在您的应用程序中使用 lodash，请在 index.html 文件中添加以下行：

<!-- index.html -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

这将在运行时将 lodash 加载为全局变量 _，您可以像使用内部模块一样使用它：

// app.js
import _ from 'lodash';

console.log(_.chunk(['a', 'b', 'c', 'd'], 2));

通过 NPM 引入外部模块

另一种方法是使用NPM将外部模块安装到您的本地代码库中。您的打包器将从这些本地模块中加载库，而不是从CDN中加载。要使用这种方法，您需要安装模块并将其添加到您的应用程序代码中。

首先，安装模块：

npm install lodash

然后，在您的应用程序代码中，像这样将模块引入您的代码中：

// app.js
import _ from 'lodash';

console.log(_.chunk(['a', 'b', 'c', 'd'], 2));

当您的应用程序打包时，它将从本地安装的 lodash 库中加载模块。

总结

将模块外部化是一种有效减少代码体积的方法。通过使用 build.rollupOptions.external 选项，您可以将库的依赖关系从您的应用程序代码中移除，并在运行时正确地引用这些库。无论您是通过CDN还是通过NPM将库添加到您的应用程序中，都可以使用这种技术来提高您应用程序的效率。