Why does p5.min.js apparently contain the whole p5.js documentation?

p5.js
1

I used p5.js occasionally over the past 2 years for playing around and experimenting.
Now I want to use it for a more serious project - and one concern is the filesize of p5.min.js.
I am using the npm version, but it seems you are exactly getting the same minified js compared to downloading it on the p5 homepage.

So I was looking into the source code a bit and found out, that the file seems to contain the whole documentary - so a lot of long strings which are not needed for production.

My question is: Is there a more minimal version of p5.js / p5.min.js?

2

I use this 1 in my “index.html” file: https://cdn.JsDelivr.net/npm/p5
And indeed I find lotsa comments there, but from the shader codes only.

3

The original js file, the one the min.js file is generated from I think, starts with ~30k lines of data which just seems to be needed for the documentation.

for example something like this:

 example: [
                  '\n<div><code>\nlet polySynth = new p5.PolySynth();\nlet pitches = ["G", "D", "G", "C"];\nlet octaves = [2, 3, 4];\n\nfunction mousePressed() {\n  // play a chord: multiple notes at the same time\n  for (let i = 0; i < 4; i++) {\n    let note = random(pitches) + random(octaves);\n    polySynth.noteAttack(note, 0.1);\n  }\n}\n\nfunction mouseReleased() {\n  // release all voices\n  polySynth.noteRelease();\n}\n</code></div>'
                ],
4

In the file I downloaded from p5js.org (starting with: /*! p5.js v0.10.2 October 14, 2019 */, so I suppose the same @GoToLoop refers to as well) I do not see the string ‘release all voices’ for instance.
Which version do you have?

5

I am on the same version. But it seems like the p5.min.js isn’t a 1 to 1 build from the p5.js file.
But I still wonder why the p5.min.js is ~560kB large. That’s quite big for a minified javascript file imho.

6

Do you think minification could be changed to strip these out and further compact the file?

7
  • From the point of view of a minifier a shader code is just another string literal.
  • A minifier/uglifier util should never touch what’s inside a string literal.
  • I’d move the full source of those shader strings to a separate file, so others can inspect them.
  • But their corresponding literals should have all comments & unnecessary spaces stripped away.
  • I’d also consider placing those shader strings inside a global object, so they’re guaranteed to be instantiated once only, sparing the JS’ GC.
8

Interesting. Maybe open this advice as issue on p5.js? Seems like a reasonable “help wanted” / “first issue” for someone who knows JS but is not familiar with the inner workings of p5.js

9

cool, sounds your considerations would things a lot better.

I’d really want a modular p5 npm package that’s stripped down to it’s bone, for example:

  • No unnecessary comment-strings in the javascript files
  • split code needed for WEBGL / P2D / shaders and so on - so you can decide exactly what you need and want to include
10

Given your specific requirements, have you considered creating your own npm package?

While minifying shader comments seems like it could be added to the pipeline if you opened an issue and suggested it, I suspect (I am not a core dev, so I don’t know) that splitting out WEBGL et cetera is never going to happen – that kind of fine-grained use isn’t part of the core audience / mission for p5.j.s, and it is more of a “batteries included” project aimed at a very wide audience including entry-level.

11

Given your specific requirements, have you considered creating your own npm package?

yes, but sadly I haven’t got the time right now.

I am now thinking about using the native Canvas 2D API because this would fulfill the needs of my current project.

But I still really think it would be awesome if we could have lightweight p5 modules.
e.g. if I only want to do canvas 2D stuff - I don’t need WEBGL or shaders.
When I am doing WEBGL I don’t need the canvas 2D stuff - and maybe I only want to use my own shaders, and so on.