使用 Externals 将 Vue 工程构建性能提升 67%：终极指南

Externals：Vue.js 工程构建的性能优化利器

在构建 Vue.js 工程时，性能是首要考虑因素之一。webpack 是一个强大的工具，可用于优化代码打包和模块加载，从而提高构建速度。externals 是 webpack 中的一个鲜为人知但功能强大的特性，可以显著提升构建性能，让您的工程飞速前进。

什么是 Externals？

Externals 是 webpack 配置中的一种设置，用于指定在构建过程中不应打包的模块或库。这些模块将从外部加载，这意味着它们不会包含在最终的构建包中。

使用 Externals 的好处

使用 externals 有几个好处：

• 提高构建性能： 通过将外部模块排除在打包过程之外，您可以减少 webpack 需要处理的文件数量，从而显着提高构建速度。
• 减小构建包大小： Externals 可以通过减少最终构建包中的代码量来缩小其大小。这可以改善加载时间和节省带宽。
• 避免代码重复： 某些库在多个工程中经常使用。使用 externals 可以防止这些库的代码重复，从而优化整体代码库。

如何使用 Externals

在 webpack 配置文件中添加 externals 属性，并指定要外部化的模块或库的名称：

module.exports = {
  externals: {
    'jquery': 'jQuery'
  }
};

在上面的示例中，我们将排除 jQuery 库，并使用全局 jQuery 变量进行外部加载。

最佳实践

• 只排除真正外部的模块： 不要将不真正外部的模块排除在构建之外，因为这可能会导致运行时错误。
• 使用全局变量名称： 确保在外部化模块时使用正确的全局变量名称，以确保在运行时正确加载。
• 测试您的构建： 在使用 externals 后，请务必测试您的构建以确保其按预期工作。

实际示例：使用 Externals 优化大型 Vue.js 工程

在我们的示例工程中，我们使用 externals 排除了以下模块：

'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',

这些库在工程的多个组件中使用。通过将它们外部化，我们能够将构建时间从 10 分钟减少到 3 分钟，性能提升了 67%。

结论

Externals 是优化 Vue.js 工程构建性能的强大工具。通过正确使用 externals，您可以显着提高构建速度、减小构建包大小并避免代码重复。通过遵循本文中概述的最佳实践，您可以充分利用 externals，并为您的用户提供闪电般的工程体验。