Question

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

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

或者在使用create-react-app时处理静态资产时，最佳做法是什么？

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

Answer 1

如果您正在使用create-react-app，并将图像导入JS文件，那么这些图像将使用url-loader webpack模块（link加载到其github）加载，嵌入其中您的图像使用DataURL直接进入HTML（更多关于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提供图像可能比应用程序的服务器更快地为您的大图像提供服务。

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

1 个答案: