在 webpack 中使用加载器如何影响你的构建文件？

Question

当我编写一个传统的网络应用程序（MVC 类型）时，资产是从公用文件夹（通常）提供的，但我注意到在 React 中没有公用文件夹（使用 create-react-app）......相反，我有使用装载机。

在构建后，加载的文件是否包含在 Webpack 为 React 生成的捆绑文件中？这是否意味着我最好为静态资产使用 CDN 而不是使用图像加载器，因为它会增加我的构建大小？

或者在使用 create-react-app 时处理静态资产时的一些最佳实践是什么？

如果您有任何意见，请先感谢！只是想更好地理解......

Answer 1

如果您使用create-react-app，并将图像导入到您的 JS 文件中，这些图像将使用url-loader webpack 模块（link 到其 github）加载，该模块将您的图像直接嵌入到 HTML使用 DataURLs（更多关于 here）或者如果图像大于 10,000 字节，则将它们放入自己的单独文件中。

相关代码在webpack.config.prod.js:

{
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve('url-loader'),
    options: {
      limit: 10000,
      name: 'static/media/[name].[hash:8].[ext]',
    },
},

根据上述配置，较大的图像（超过 10,000 字节）将放置在 static/media 文件夹中。

如果您将图像导入 JS 文件，如下所示：

import img from './file.png'

如果您不导入图像，则完全由您来选择如何组织图像。例如，您可以将图像放在根目录下的 /static/images 文件夹中，然后像这样引用这些图像：

<img src="/static/images/logo.png" />

就最佳实践而言，您可以用任何一种方式提出论点。使用url-loader 的一个主要好处是可以将较小的图像嵌入到您的 HTML 中，这应该有助于提高性能。另一方面，从 CDN 提供图像可能比应用程序的服务器更快地提供大图像。