5

So as of today, p5.js is on version 1.4.2 and the minified file stands at a whopping 804KB filesize.

I am a website developer and have been learning and getting better at it since some months now and want to use it on client sites as animated backgrounds to add some zing. I do know that the raw p5.js is a collection of a lot of sub-libraries and with a total size of around 4MBs. How can I shave off unwanted libraries safely from the parent p5.js file and then minimise it for production use?

Someone pointed out to me on FB that the opentype library is the biggest 'file'. But I am not too good with Github so wasn't able to find this file in the p5.js repo.

I almost never use sound, video, ASCII, typography functions. And if my sketch is purely 2D, the 3D library too doesn't serve me any purpose. So I want to save small sized versions of the p5.min.js file on my system to use on a per project basis. Please help me understand this. I do not want to waste these past months of hard work.

Thank you.

Tornado_code
  • 199
  • 8
  • What you want is called tree-shaking: it removes unused code. It is a pretty standard feature in any bundler (Webpack, Vite, esbuild, etc.). _It requires a build step and cannot be used with a CDN-sourced file._ – Darryl Noakes Jul 29 '22 at 21:52
  • p5.js is pretty old and has not been updated to do tree-shaking (to my knowledge). You might want to try writing [vanilla canvas code](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) or look up other canvas libraries – Samathingamajig Jul 29 '22 at 21:52
  • Is your sketch small enough to share? Usually folks are only using a subset of p5, so you could probably manually strip out most of the library if it came to that. – ggorlen Jul 30 '22 at 04:46
  • 1
    You can try to install p5 using `npm install p5` and then only `import` the parts that you need, just to see if that makes the bundle smaller (I'm curious too!). If not, you could try looking at PixiJS which is comparable to P5 but smaller, and also has optional bundles: https://pixijs.io/customize/ – Kokodoko Jul 30 '22 at 09:59
  • 1
    @Kokodoko thank you for the Pixi customizer link. An option like that would be super helpful for p5's practicability on the web. I discussed the `min` file size with Daniel Shiffman (on his youtube channel) and he appeared interested in the matter and said that he would look into it. – Tornado_code Aug 19 '22 at 19:26

2 Answers2

4

Thanks guys, but I found q5 library to be what I was looking for. Its min.js weighs only around 35kbs and after I remove the sound stuff from it, it's down to about 26kb :)

It doesn't support 3D yet, but I was able to make my 2D p5 sketches work with it perfectly! :)

Please support q5: https://github.com/LingDong-/q5xjs

Tornado_code
  • 199
  • 8
2

Well, there's this: https://github.com/processing/p5.js/blob/main/contributor_docs/custom_p5_build.md

But I couldn't get it to work with the default p5.js editor's code:

function setup(){
    createCanvas(600, 400)
}

function draw(){
    background(20)
}

Even with this command:

npm run grunt combineModules:min:core/shape:color:dom:image:shapes:data:accesibility:io:utilities uglify

I still get this._pInst._addAccsOutput is not a function type error. Which probably means that a file/part of the p5 script file is missing.

this._pInst._addAccsOutput also seems to not have a function body defined anywhere in the file.

For other things:

My HTML script tags are as so:

<script src="modules/p5Custom.min.js"></script>
<script defer src="sketch.js"></script>

And folder hierarchy:

- p5js
  - lib
    - index.html
    - sketch.js
    - modules
      - p5Custom.min.js

And the setup() & draw() functions work perfectly, the createCanvas() also probably works, it seems to only be a problem with background(), or colors, but "green" & color(20, 20, 20) doesn't work either.

Ulti
  • 514
  • 3
  • 5