Add a single file (or single JS file at least) build option

[jlfwong]

This would allow speedscope to be more easily integrated into environments where CSP is used

See: tmm1/stackprof#100 (comment)

[BlakeWilliams]

I ran into this issue again and was hoping that there was an easy way to get parcel to bundle into a single file. Sadly, I don't think that's the case.

The only solution I came up with was replacing the dynamic imports with regular imports to prevent parcel code splitting.

I briefly spiked that idea out to see what the file size difference would be and speedscope.js went from 242kb to 618kb, so not great but not the worst. I'm not the most familiar with Parcel and couldn't find anything that would allow us to conditionally code split these files.

Happy to open a PR sharing those changes if you're interested. It'd be great if there was some way somehow opt-in to the larger single file build since it works around CSP issues. I'm not too concerned about file size for our use case, especially since browsers should disk cache assets after the first visit.

[jlfwong]

Yeah, ideally I'd like a build process that just ignores code splitting for this use case but I definitely want to retain code splitting for the main build deployed to https://www.speedscope.app/. So the single-file version would be available only for integration into other environments but not served at all from speedscope.app.

I'd eventually like to switch to esbuild, so what parcel does here isn't super relevant. esbuild is still working on fully supporting code splitting: evanw/esbuild#16.

Thanks for looking into it, but I wouldn't accept a PR which removes the code splitting and increases the main bundle size 400kb. If you do find a sensible way to do this conditionally, please let me know!

[BlakeWilliams]

@jlfwong I totally understand, 400kb is a lot. 😄

I took another peek last night and got this working last night by adding conditionals that require the file via require if an env variable is set. It's ideal, but it does work. Happy to open up a PR for that later.

[jlfwong]

Oh huh, another thing to try is actually to build the thing with esbuild. It looks like code splitting is an opt-in behavior with esbuild at the moment, so opting out of it presumably creates a single file.

[evanw]

Speedscope is one of my test cases for esbuild so this should work fine. The command is something like this:

esbuild src/speedscope.tsx --bundle --minify --define:process.env.NODE_ENV=\"production\"

Let me know if you encounter any issues.