**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`:
```
<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.
