将 mp4 文件放在 public 或 src 文件夹中 -> create-react-app 最佳实践

Question

我正要部署 React 应用程序，想知道是否应该在 src 或 public 文件夹中放置背景视频。

我目前在 src 中有一个 asset 文件夹，我从中提供 mp4 背景视频。在本地主机上就像一个魅力。

我已经用谷歌搜索过这个问题，但没有结果。 create-react-app 文档没有提供任何建议，也没有提及处理较大的视频文件。

如果有人能在这个话题上启发我，我真的很感激。

Answer 1

正如文档中的建议：

如果您将文件放入公共文件夹中，则webpack不会处理该文件。相反，它将原封不动地复制到构建文件夹中。

最好将此类文件放入

public

文件夹中，以免在构建过程中与

Webpack

的 FileLoader 发生冲突，但是，您也可以使用 asset 文件夹，但

webpack

会考虑它们作为 assets 并在末尾添加

chunk hash

并将 reference 放入将要创建的

bundle

中。

Answer 2

我刚刚遇到这个。我知道 OP 的原始帖子是很久以前的事了，但问题仍然相关，因此添加另一个答案以防它有用。

假设您有一个包含 100Kb 代码的 React 应用程序。您有一个 2Mb .mp4 视频文件。 假设这是一个典型的设置（我使用 Vite 创建一个新的 React 应用程序） 您将 .mp4 添加到 /src/assets/foo.mp4

您将其导入组件中，例如：

从'assets/foo.mp4'导入fooVideo

并在你的 jsx 中使用它，例如：

当您构建应用程序时，视频源代码将成为生成的 app.js 文件的一部分，从而将您的 app.js 膨胀到 2.1Mb（2Mb 视频，100K 其他所有内容）。

这意味着当用户启动您的 React 应用程序时，浏览器需要在发生任何事情之前下载 2.1Mb 的 .js 文件。也许您有一个带有漂亮旋转动画或其他内容的加载页面，但无论哪种方式，用户都必须等待。如果他们使用的是低带宽区域的移动设备，这可能不是一个好的用户体验。

相反，在捆绑的应用程序中添加一些小占位符，并从公共目录延迟加载资源。这可以通过很多不同的方式来完成，但最简单的方式之一，例如大图像是这样的：

/src/assets/lo-res_image.jpg（作为捆绑包中的资产） /public/images/hi-res_image.jpg（不在捆绑包中）

从'assets/lo-res_image.jpg'导入loResImage

现在，应用程序会立即加载，渲染低分辨率图像，并在准备好后替换为高分辨率版本。