Webpack 模块规则从 CDN 提供图标

Question

我的应用程序提供了图标下拉菜单。我们正在使用 simple-icons、bootstrap-icons 以及我们内部开发的一些自定义图标。

这些图标由我们的应用程序使用 webpack 模块规则托管。例如，简单图标的规则如下：

{
  test: /simple-icons\/.*\.svg$/,
  type: "asset/resource",
  generator: {
    filename: "icons/simple-icons/[name][ext]",
  },
},

这告诉 webpack 将所有 SVG 文件从 simple-icons npm 包复制到最终构建中的

icons/simple-icons/

文件夹。然后可以在我们的网站上通过各自的路径访问这些图标。例如，可通过

github.svg

访问

<BASE_URL>/icons/simple-icons/github.svg

文件。

这种方法效果很好，但它会使捆绑包的大小变得臃肿。如果能够从 CDN 提供这些图标并将它们从捆绑包中删除，那就太棒了。

我考虑过将图标写入 S3，但意识到它们已经由 CDN 托管，例如jsDelivr。所以我更改了上面的规则，以便我的应用程序将提供来自 jsDelivr 的图标：

{
  test: /simple-icons\/.*\.svg$/,
  type: "asset/resource",
  generator: {
    emit: false,
    publicPath: `https://cdn.jsdelivr.net/npm/simple-icons@${
      require("simple-icons/package.json").version
    }/`,
    filename: "icons/[name][ext]",
  },
},

注意，

emit=False

告诉webpack不要将文件复制到服务器，这是有道理的，因为文件已经在那里了。

这将从捆绑包中删除图标，并允许我从 jsDelivr 中提取它们。这种方法/实施有什么主要缺点吗？我对 webpack 很陌生，所以只是想知道我是否正确配置了它。

Answer 1

使用 CDN 提供图标，而不是将它们包含在应用程序包中，可以帮助减小包大小并提高加载速度。但是，请记住潜在的缺点，例如依赖 CDN 的可用性、需要准确的版本跟踪、隐私问题、轻微的性能开销、缓存控制、安全考虑以及许可合规性。建议自动进行版本跟踪并监控 CDN 性能。总之，这种方法是一种有效的优化策略，但需要仔细考虑您的具体要求和潜在挑战。

您可以在以下资源中找到有关我正在谈论的内容的更多信息：

• 什么是 CDN 以及它是如何工作的？
• CDN 的优缺点
• CDN缓存策略
• 测量 CDN 性能