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.
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.
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.
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