如何在Tauri+React项目中使用4GB大型资源文件夹？

一、解决构建内存不足问题：资源目录正确配置 #

把4GB的资源文件夹从public移到项目根目录下（比如命名为assets），绝对不要放在public目录——因为public下的文件会被Vite/React打包工具处理，进而触发LLVM对超大文件的编译，直接导致内存溢出。

修改tauri.conf.json的build配置，将资源文件夹设为Tauri原生构建资源，跳过前端打包流程：

"build": {
  "beforeDevCommand": "npm run dev",
  "beforeBuildCommand": "npm run build",
  "resources": ["./assets/**/*"], // 匹配assets下所有文件
  "distDir": "../dist"
}

这样Tauri打包时只会直接复制assets文件夹到应用的资源目录，不会经过LLVM编译，彻底解决内存不足问题。

二、前端访问资源的正确方式 #

前端无法直接通过相对路径访问Tauri的资源目录，需要通过Tauri的pathAPI获取资源目录的绝对路径，再拼接具体资源的文件名：

1. 先安装Tauri的API依赖（如果没装的话）：

npm install @tauri-apps/api

2. 前端代码示例（加载高清视频）：

import { getResourceDir } from '@tauri-apps/api/path';

// 加载视频的函数
async function loadHDVideo(videoFilename) {
  const resourceDir = await getResourceDir();
  // 拼接资源绝对路径
  const videoPath = `${resourceDir}/videos/${videoFilename}`;
  // 给video元素设置src
  const videoEl = document.getElementById('hd-video');
  videoEl.src = videoPath;
  await videoEl.load();
}

// 调用示例
loadHDVideo('summer-vacation.mp4');

三、性能最优的大文件加载方案 #

对于4GB级别的音视频，绝对不要嵌入到应用二进制中（即不要用embeddedResources配置），采用「独立文件+本地路径流式加载」是最优选择：

• 资源以独立文件形式存放在应用资源目录，WebView直接读取本地磁盘文件，支持流式播放、断点续传，内存占用极低。
• 相比嵌入式资源，这种方式打包速度更快，应用包体积更合理（不会把4GB资源塞进单个二进制文件），加载延迟几乎为零。

四、资源文件夹最佳放置位置 #

项目根目录下的独立文件夹（如assets、static-resources）是最佳选择：

• 避开前端打包工具的处理范围，避免构建时的内存问题。
• 符合Tauri的资源管理规范，打包后会被自动放置到对应平台的标准资源目录（Mac：Contents/Resources；Windows：resources；Linux：usr/share/[app-name]）。

内容的提问来源于stack exchange，提问作者Luca Serafini