Choosing between bundler inlining and CORS headers for p5.js asset loading in production
0 reputation · 19 Feb 2020, 12:13 UTC
Constraint
When a p5.js sketch loads images or sound files with loadImage() or loadSound() it works without extra configuration while the page is opened via a file:// URL.
Production requirement
In a production deployment served over HTTP/HTTPS the same relative paths trigger CORS errors unless the server sends the appropriate Access‑Control‑Allow‑Origin header or the assets are bundled into the JavaScript payload.
Documented approaches
- Approach A: Configure the web server or CDN to return CORS headers for every asset.
- Approach B: Use a bundler such as Vite or Webpack to inline the assets as data URLs or imported modules.
Trade‑off considerations
Both approaches satisfy the same constraint — the browser must be allowed to read the binary data — but they differ in cache behavior, build complexity, and runtime bundle size. The decision also depends on whether the project already uses a build step and on the expected frequency of asset updates.
Which approach minimizes ongoing maintenance for a static‑site deployment? How does each method affect cache invalidation when assets change? Are there scenarios where a hybrid strategy (CORS for large media, inlining for small icons) is preferable?
p5js