Shorten file names in React build directory to less than 32 chars

Question

This is going to sound really dumb but I need a way to shorten file names of my React build folder because I need to upload my React app to a SPIFFS file system on an ESP32 that only supports file names up to 32 characters (including folders).

I think an easy way would be to get rid of the hashes at the end of the files but I don't know how to do that.

So how can I shorten the file names of a React app?

yepp. Figure out how you can use webpack and setup your own react pipeline. Its really not as hard as it sounds. Also make sure you build in release mode (NODE_ENV="production") and you tar gz your files before uploading them to the esp, so the browser can unzip them, in order to save space — user2741831, Jun 02 '22 at 04:45

score 2 · Answer 1 · answered Jul 29 '23 at 18:01

Firstly, don't get rid of hashes entirely, they're incredibly useful for cache invalidation. I also recommend not starting your own build from scratch unless you know what you're doing; CRA is really good at this stuff, even if it does throw in a bunch of stuff you probably will never use. (Vite templates are also a good solution, see the other answer and especially the comments there).

If you're set on using CRA, first run npm run eject. This means you'll now be in charge of your own config rather than relying entirely on create-react-app, but you need this to change your Webpack config (or you could use react-app-rewired, customize-cra, or some other similar option).

Change the output to use a shorter contenthash (maybe 4) and change out [name] for something shorter, like the result of a random character generator that only returns two chars. If you always just produce one bundle, use a static name rather than something dynamic (in brackets). If you don't want chunks, delete the chunk related config.

And if you want the simplest possible solution, still start from create-react-app and ejecting, but change all of output to something like this:

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

And definitely gzip the output, with a Make target or shell script or a package.

score 1 · Answer 2 · answered Jul 27 '23 at 04:38

1

I used vite with preact to create my React for ESP32 project (npm create vite@latest my_project --template preact). vite uses rollup as it's bundler and rollup has simple configuration options to change its bundling strategy.

To create filenames compatible with ESP32 SPIFFS (i.e. the full path not longer than 31 characters), I used the following config options in 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"
      }
    }
  },
  ...

You can read about the rollup configuration options here.

answered Jul 27 '23 at 04:38

par

17,361
4
65
80

I don't think this is a valid answer, as you're not even attempting to give instructions for the tool the person is using (`create-react-app`). How you could configure `vite` to do this is an answer for another questions. – rschristian Jul 28 '23 at 22:14
@rschristian The question is about ESP32 and SPIFFS, where you have only a 4MB flash, of which (assuming you use OTA) you have at most ~1.3MB for your SPIFFS partition. `create-react-app` by itself consumes ~500KiB, and then there are the problems associated with filename lengths described in the question. In contrast, vite-preact consumes ~18KiB and via rollup has a mechanism to easily reduce filenames. I agree with you that this doesn't address the question directly, but doing so is _the wrong way_ as space is such a major concern on ESP32. My answer presents a much more pragmatic approach. – par Jul 29 '23 at 17:41
@par agreed! I think it would be great if you include the explanation of cra vs vite in your answer itself. – Ajay Gupta Jul 29 '23 at 17:49
Here's a great YouTube video on using React with ESP32: https://www.youtube.com/watch?v=R9n32nxrzug – par Jul 30 '23 at 16:42

Shorten file names in React build directory to less than 32 chars

2 Answers2