P5.js: `import p5 from "p5"` NPM distribution not suitable for production, please minify

[Streemo]

TLDR: Apparent bug in p5.sound.min.js causing it to load the educational (heavy) p5.js file instead of production p5.min.js with NPM.

---

If there's a trivial way to use the minified build with npm, please share, as I am new to define.js. This is a package request on behalf of those using webpack and npm. AFAIK, webpack is used for production builds and heavy documentation in source code is an anti-pattern in the npm world. The way p5 is set up currently with npm makes it difficult to use for production:

Using p5.js with webpack/ES6, we run npm install --save p5 in our project which gives us the p5 npm package, containing p5.js, p5.min.js and the associated add-ons. This line of code is used to import p5 into an ES6 app:

import p5 from "p5"
// make cool artsy stuff here in instance mode!

The package.json refers to code in p5.js, which is 2.6MB. The minified build is around 380KB, so I looked into the source to see what was causing the bloat.

The main package file p5.js contains around 1MB of tutorial content such as:

...
{
            "file": "lib/addons/p5.dom.js",
            "line": 2216,
            "description": "<p>Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.</p>\n",
            "params": [
                {
                    "name": "val",
                    "description": "<p>volume between 0.0 and 1.0</p>\n",
                    "type": "Number",
                    "optional": true
                }
            ],
            "return": {
                "description": "current volume or p5.MediaElement",
                "type": "Number|p5.MediaElement"
            },
            "itemtype": "method",
            "name": "volume",
            "example": [
                "\n<div><code>\nvar ele;\nfunction setup() {\n  // p5.MediaElement objects are usually created\n  // by calling the createAudio(), createVideo(),\n  // and createCapture() functions.\n  // In this example we create\n  // a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\nfunction mouseClicked() {\n  // Here we call the volume() function\n  // on the sound element to set its volume\n  // Volume must be between 0.0 and 1.0\n  ele.volume(0.2);\n  ele.play();\n  background(200);\n  text('You clicked Play!', width / 2, height / 2);\n}\n</code></div>\n<div><code>\nvar audio;\nvar counter = 0;\n\nfunction loaded() {\n  audio.play();\n}\n\nfunction setup() {\n  audio = createAudio('assets/lucky_dragons.mp3', loaded);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  if (counter === 0) {\n    background(0, 255, 0);\n    text('volume(0.9)', width / 2, height / 2);\n  } else if (counter === 1) {\n    background(255, 255, 0);\n    text('volume(0.5)', width / 2, height / 2);\n  } else if (counter === 2) {\n    background(255, 0, 0);\n    text('volume(0.1)', width / 2, height / 2);\n  }\n}\n\nfunction mousePressed() {\n  counter++;\n  if (counter === 0) {\n    audio.volume(0.9);\n  } else if (counter === 1) {\n    audio.volume(0.5);\n  } else if (counter === 2) {\n    audio.volume(0.1);\n  } else {\n    counter = 0;\n    audio.volume(0.9);\n  }\n}\n</code>\n</div>"
            ],
            "class": "p5.MediaElement",
            "module": "p5.dom",
            "submodule": "p5.dom"
        },
...

It contains a few hundred KB of repeated logs such as:

...
{
            "message": "unknown tag: alt",
            "line": " src/color/creating_reading.js:16"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/creating_reading.js:61"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/creating_reading.js:91"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/creating_reading.js:121"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/creating_reading.js:319"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/creating_reading.js:350"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/creating_reading.js:387"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/creating_reading.js:484"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/creating_reading.js:514"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/creating_reading.js:554"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/p5.Color.js:52"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/p5.Color.js:247"
        },
        {
            "message": "unknown tag: alt",
            "line": " src/color/p5.Color.js:274"
        },
...

It contains a few hundred KB of documentation such as:

/**
 * Specular material for geometry with a given color. You can view all
 * possible materials in this
 * <a href="https://p5js.org/examples/3d-materials.html">example</a>.
 * @method specularMaterial
 * @param  {Number} v1  gray value, red or hue value
 *                       (depending on the current color mode),
 * @param  {Number} [v2] green or saturation value
 * @param  {Number} [v3] blue or brightness value
 * @param  {Number} [a]  opacity
 * @chainable
 * @example
 * <div>
 * <code>
 * function setup() {
 *   createCanvas(100, 100, WEBGL);
 * }
 * function draw() {
 *   background(0);
 *   ambientLight(100);
 *   pointLight(250, 250, 250, 100, 100, 0);
 *   specularMaterial(250);
 *   sphere(50);
 * }
 * </code>
 * </div>
 *
 * @alt
 * diffused radiating light source from top right of canvas
 *
 */

IIUC, this stuff isn't required, and is slowing down the actual app, making it basically impossible for anyone in data-scarce countries to use. I'm still scratching my head as to why this is monolithic file is the main import in the npm package... the npm package should include this docu-code for learning purposes, but should probably allow people to import the minified version of the distribution:

import p5 from "p5/lib/p5.min.js"

Hold on, we can do that already! But what about p5.sound.min.js?:

import p5 from "p5/lib/p5.min.js"
import "p5/lib/addons/p5.sound.min.js" // this doesn't depend on the minified p5???

I tried referring to the minified builds as seen above, but it appears that p5.sound.min.js actually depends on the non-minified p5.js file, making it basically unusable for production. The only solution I can think of is to fall back and manually insert the following script tags in my index.html:

<!-- condensed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script>

Unfortunately, doing so means that I can't easily benefit from the advantages that webpack provides, and it creates a discontinuity in my workflow.

Apparent fix:

1. NPM package p5 should export only the absolute necessary code for better end-user experience and development
2. p5.sound.min.js needs to require p5? Or can this be independent? In any case, should depend on the minified version for the same reasons.

[Kinrany]

Perhaps p5.min.js and p5.sound.min.js could have their own packages, used by p5?

[outofambit]

Hi @Streemo. I think this could be addressed in your webpack config with a resolve alias to the path of the minified p5js files. This should get you at least part of the way there.

You might also be able to do something with include.

[outofambit]

also, if you are fairly certain that this is an issue with p5.sound.min.js it might be good to open an issue in that repo (https://github.com/processing/p5.js-sound/issues).

[Streemo]

@outofambit the hacky fix which worked is to edit p5's main field in package.json on-the-fly to point to the minified file. It is a problem with p5.sound.min; it requires the non-minified p5!

[therewasaguy]

@Streemo it sounds like this could be resolved by changing the main in p5.js package.json to use the .min.js, here, and by adding "main": "./lib/p5.sound.min.js" to p5.sound's package.json ?

[Streemo]

Hey! Yes this is exactly what I did locally, but only because I was about
to minify my bundle anyway. Not sure about the aliasing for webpack, but I
don't think this problem belongs in webpack scope?

IIRC there was an issue with p5.sound.min requiring p5 rather than the
minified file, rather than the entry point. Idk if you guys are comfortable
using the mangled file as the default package entry point, it seems like it
could lead to debugging issues.

On Tue, Jun 5, 2018, 23:52 Jason Sigal [e-mail] wrote:

@Streemo https://github.com/Streemo it sounds like this could be
resolved by changing the main in p5.js package.json to use the .min.js,
here https://github.com/processing/p5.js/blob/master/package.json#L104,
and by adding "main": "./lib/p5.sound.min.js" to p5.sound's package.json ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js/issues/2920#issuecomment-394931951,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIbgsmgs0XtVqqG3ojOfltm2MweOiIXsks5t51IQgaJpZM4UFm77
.

[ashugeo]

Hello @therewasaguy @Streemo, I'm pretty interested in this matter. I've tried hacking the node_modules/p5/package.json file like this:

"files": [
    "lib/p5.min.js"
  ],
"main": "./lib/p5.min.js",

It won't seem to make my bundles smaller though, UglifyJS still outputs a 1MB+ file. Any idea on how to tackle this? Thanks!

[barning]

I think this is still a thing. The file from npm is huge.

[neefrehman]

Running into this issue currently as well. import p5 from "p5" with Webpack is importing a huge file that includes all the documentation and logs for the project. Even after subsequently being run through a minifier it comes out at 1.7MB, as the docs/logs remain.