将 React 构建目录中的文件名缩短至少于 32 个字符

Question

这听起来很愚蠢，但我需要一种方法来缩短 React 构建文件夹的文件名，因为我需要将 React 应用程序上传到 ESP32 上的 SPIFFS 文件系统，该系统仅支持最多 32 个字符的文件名（包括文件夹） 。

我认为一个简单的方法是删除文件末尾的哈希值，但我不知道该怎么做。

那么如何缩短 React 应用程序的文件名呢？

Answer 1

首先，不要完全摆脱哈希，它们对于缓存失效非常有用。我还建议不要从头开始自己的构建，除非您知道自己在做什么； CRA 确实很擅长这些东西，即使它确实抛出了一堆你可能永远不会使用的东西。 （Vite 模板也是一个很好的解决方案，请参阅其他答案，尤其是那里的评论）。

如果您决定使用 CRA，请首先运行 npm runject。这意味着您现在将负责自己的配置，而不是完全依赖 create-react-app，但您需要它来更改您的 Webpack 配置（或者您可以使用react-app-rewired、customize-cra 或某些其他类似的选项）。

更改 输出 使用较短的 contenthash（可能是 4）并更改[name] 表示较短的内容，例如仅返回两个字符的随机字符生成器的结果。如果您总是只生成一个包，请使用静态名称而不是动态名称（在括号中）。如果不需要 chunk，请删除 chunk 相关配置。

如果您想要最简单的解决方案，仍然从 create-react-app 开始并弹出，但将所有 output 更改为如下所示：

const crypto = require('crypto')
const id = crypto.randomBytes(2).toString('hex')
output: {
  filename: `x.${id}.js`
}

并且肯定会 gzip 输出，使用 Make 目标或 shell 脚本或包。

Answer 2

我使用了 vite 和 preact 创建我的 React for ESP32 项目 (npm create vite@latest my_project --template preact)。 vite 使用 rollup 作为捆绑器，并且 rollup 有简单的配置选项来更改其捆绑策略。

为了创建与 ESP32 SPIFFS 兼容的文件名（即不超过 31 个字符的完整路径），我在 vite.config.js 中使用了以下配置选项：

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: "a/[hash:10][extname]",
        chunkFileNames: "c/[hash:10].js",
        entryFileNames: "e/[hash:10].js"
      }
    }
  },
  ...

您可以阅读有关汇总配置选项的信息 此处。