Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

combineModules (custom build) output is not minified #3950

Closed
4 tasks done
coreygo opened this issue Aug 18, 2019 · 5 comments
Closed
4 tasks done

combineModules (custom build) output is not minified #3950

coreygo opened this issue Aug 18, 2019 · 5 comments
Labels
Build Process

Comments

@coreygo
Copy link
Contributor

coreygo commented Aug 18, 2019 •
edited
Loading

Nature of issue?

  • Found a bug
  • Existing feature enhancement

Most appropriate sub-area of p5.js?

  • Other (build system)

Which platform were you using when you encountered this?

  • Desktop/Laptop

Details about the bug:

  • p5.js version: v0.9.0 (2f85dda)
  • Web browser and version: N/A
  • Operating System: MacOS 10.14.6
  • Steps to reproduce this:
    npm run grunt combineModules:core/shape:color:math:image
    which outputs a 2.5M lib/modules/p5Custom.js
    compared to the full p5.min.js at 543K

Feature enhancement details:

I've created and committed a potential update to tasks/build/combineModules.js which enables minification using uglify similar to the existing Grunt task for browserify and uglify.

  • Steps tested after update:

    • npm run grunt combineModules:core/shape:color:math:image
      which outputs a 2.5M lib/modules/p5Custom.js

    • npm run grunt combineModules:min:core/shape:color:math:image
      which outputs a 1.3M lib/modules/p5Custom.pre-min.js

    • npm run grunt combineModules:min:core/shape:color:math:image uglify
      which outputs a 207K lib/modules/p5Custom.min.js

The full minified p5.min.js is 543K, p5.pre-min.js is 2.9M, and p5.js is 4M.

After discussion, I'm happy to create a new pull request and will update the custom_p5_build.md doc before doing so.

This could help alleviate any wait on larger build system updates enabling smaller bundles.
@welcome
Copy link

welcome bot commented Aug 18, 2019

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

@coreygo
Copy link
Contributor Author

coreygo commented Aug 18, 2019

Tagging #522 and #3425 as related issues.

@coreygo
Copy link
Contributor Author

coreygo commented Aug 19, 2019

I should note that my build can't be merged as-is right now, it breaks things overall… was testing a quick workaround. Will update with something which can be merged.

@coreygo
Copy link
Contributor Author

coreygo commented Aug 19, 2019

Okay, I've pushed an update (0de9bc4) which seems to do the trick without breaking anything (as far as I can tell). If there's a better way to improve the Grunt tasks enabling "uglified browseified minified" output 😉 for custom builds please let me know. I'm not familiar enough with Grunt or the p5.js build system so might be missing something obvious.

Truncated output from `npm run grunt` after initial `npm i` 

$ npm run grunt

> [email protected] grunt /Users/corey/Projects/p5.js
> grunt
...
Running "browserify" task
>> Bundle lib/p5.js created.

Running "browserify:min" (browserify) task
>> Bundle lib/p5.pre-min.js created.

Running "uglify:dist" (uglify) task
>> Destination lib/modules/p5Custom.min.js not written because src files were empty.
>> 1 files created 2.99 MB → 554.57 kB
...
Done.

`npm run grunt combineModules:core/shape:color:math:image` 

$ npm run grunt combineModules:core/shape:color:math:image

> [email protected] grunt /Users/corey/Projects/p5.js
> grunt "combineModules:core/shape:color:math:image"

Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Running "combineModules:core/shape:color:math:image" (combineModules) task
[ '/Users/corey/Projects/p5.js/src/core/main.js',
  '/Users/corey/Projects/p5.js/src/core/constants.js',
  '/Users/corey/Projects/p5.js/src/core/environment.js',
  '/Users/corey/Projects/p5.js/src/core/error_helpers.js',
  '/Users/corey/Projects/p5.js/src/core/helpers.js',
  '/Users/corey/Projects/p5.js/src/core/legacy.js',
  '/Users/corey/Projects/p5.js/src/core/preload.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Element.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Graphics.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Renderer.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Renderer2D.js',
  '/Users/corey/Projects/p5.js/src/core/rendering.js',
  '/Users/corey/Projects/p5.js/src/core/shim.js',
  '/Users/corey/Projects/p5.js/src/core/structure.js',
  '/Users/corey/Projects/p5.js/src/core/transform.js',
  '/Users/corey/Projects/p5.js/src/core/shape/2d_primitives.js',
  '/Users/corey/Projects/p5.js/src/core/shape/attributes.js',
  '/Users/corey/Projects/p5.js/src/core/shape/curves.js',
  '/Users/corey/Projects/p5.js/src/core/shape/vertex.js',
  '/Users/corey/Projects/p5.js/src/color/color_conversion.js',
  '/Users/corey/Projects/p5.js/src/color/creating_reading.js',
  '/Users/corey/Projects/p5.js/src/color/p5.Color.js',
  '/Users/corey/Projects/p5.js/src/color/setting.js',
  '/Users/corey/Projects/p5.js/src/image/filters.js',
  '/Users/corey/Projects/p5.js/src/image/image.js',
  '/Users/corey/Projects/p5.js/src/image/loading_displaying.js',
  '/Users/corey/Projects/p5.js/src/image/p5.Image.js',
  '/Users/corey/Projects/p5.js/src/image/pixels.js',
  '/Users/corey/Projects/p5.js/src/math/calculation.js',
  '/Users/corey/Projects/p5.js/src/math/math.js',
  '/Users/corey/Projects/p5.js/src/math/noise.js',
  '/Users/corey/Projects/p5.js/src/math/p5.Vector.js',
  '/Users/corey/Projects/p5.js/src/math/random.js',
  '/Users/corey/Projects/p5.js/src/math/trigonometry.js',
  '/Users/corey/Projects/p5.js/src/core/init.js' ]
>> Module /Users/corey/Projects/p5.js/lib/modules/p5Custom.js created.

Done.

`npm run grunt uglify` prior to `npm run grunt combineModules:min` 

$ npm run grunt uglify

> [email protected] grunt /Users/corey/Projects/p5.js
> grunt "uglify"

Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Running "uglify:dist" (uglify) task
>> Destination lib/modules/p5Custom.min.js not written because src files were empty.
>> 1 files created 2.99 MB → 554.57 kB

Done.

`npm run grunt combineModules:min:core/shape:color:math:image uglify` 

$ npm run grunt combineModules:min:core/shape:color:math:image uglify

> [email protected] grunt /Users/corey/Projects/p5.js
> grunt "combineModules:min:core/shape:color:math:image" "uglify"

Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Running "combineModules:min:core/shape:color:math:image" (combineModules) task
[ '/Users/corey/Projects/p5.js/src/core/main.js',
  '/Users/corey/Projects/p5.js/src/core/constants.js',
  '/Users/corey/Projects/p5.js/src/core/environment.js',
  '/Users/corey/Projects/p5.js/src/core/error_helpers.js',
  '/Users/corey/Projects/p5.js/src/core/helpers.js',
  '/Users/corey/Projects/p5.js/src/core/legacy.js',
  '/Users/corey/Projects/p5.js/src/core/preload.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Element.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Graphics.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Renderer.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Renderer2D.js',
  '/Users/corey/Projects/p5.js/src/core/rendering.js',
  '/Users/corey/Projects/p5.js/src/core/shim.js',
  '/Users/corey/Projects/p5.js/src/core/structure.js',
  '/Users/corey/Projects/p5.js/src/core/transform.js',
  '/Users/corey/Projects/p5.js/src/core/shape/2d_primitives.js',
  '/Users/corey/Projects/p5.js/src/core/shape/attributes.js',
  '/Users/corey/Projects/p5.js/src/core/shape/curves.js',
  '/Users/corey/Projects/p5.js/src/core/shape/vertex.js',
  '/Users/corey/Projects/p5.js/src/color/color_conversion.js',
  '/Users/corey/Projects/p5.js/src/color/creating_reading.js',
  '/Users/corey/Projects/p5.js/src/color/p5.Color.js',
  '/Users/corey/Projects/p5.js/src/color/setting.js',
  '/Users/corey/Projects/p5.js/src/image/filters.js',
  '/Users/corey/Projects/p5.js/src/image/image.js',
  '/Users/corey/Projects/p5.js/src/image/loading_displaying.js',
  '/Users/corey/Projects/p5.js/src/image/p5.Image.js',
  '/Users/corey/Projects/p5.js/src/image/pixels.js',
  '/Users/corey/Projects/p5.js/src/math/calculation.js',
  '/Users/corey/Projects/p5.js/src/math/math.js',
  '/Users/corey/Projects/p5.js/src/math/noise.js',
  '/Users/corey/Projects/p5.js/src/math/p5.Vector.js',
  '/Users/corey/Projects/p5.js/src/math/random.js',
  '/Users/corey/Projects/p5.js/src/math/trigonometry.js',
  '/Users/corey/Projects/p5.js/src/core/init.js' ]
>> Module /Users/corey/Projects/p5.js/lib/modules/p5Custom.pre-min.js created.

Running "uglify:dist" (uglify) task
>> 2 files created 4.36 MB → 766.25 kB

Done.

Note: lib/p5.min.js is still created.

Clean previous build output then `npm run grunt combineModules:min:... uglify` 

$ rm -rf p5.min.js p5.pre-min.js p5.js p5-test.js modules/*
$ npm run grunt combineModules:min:core/shape:color:math:image uglify

> [email protected] grunt /Users/corey/Projects/p5.js
> grunt "combineModules:min:core/shape:color:math:image" "uglify"

Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Running "combineModules:min:core/shape:color:math:image" (combineModules) task
[ '/Users/corey/Projects/p5.js/src/core/main.js',
  '/Users/corey/Projects/p5.js/src/core/constants.js',
  '/Users/corey/Projects/p5.js/src/core/environment.js',
  '/Users/corey/Projects/p5.js/src/core/error_helpers.js',
  '/Users/corey/Projects/p5.js/src/core/helpers.js',
  '/Users/corey/Projects/p5.js/src/core/legacy.js',
  '/Users/corey/Projects/p5.js/src/core/preload.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Element.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Graphics.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Renderer.js',
  '/Users/corey/Projects/p5.js/src/core/p5.Renderer2D.js',
  '/Users/corey/Projects/p5.js/src/core/rendering.js',
  '/Users/corey/Projects/p5.js/src/core/shim.js',
  '/Users/corey/Projects/p5.js/src/core/structure.js',
  '/Users/corey/Projects/p5.js/src/core/transform.js',
  '/Users/corey/Projects/p5.js/src/core/shape/2d_primitives.js',
  '/Users/corey/Projects/p5.js/src/core/shape/attributes.js',
  '/Users/corey/Projects/p5.js/src/core/shape/curves.js',
  '/Users/corey/Projects/p5.js/src/core/shape/vertex.js',
  '/Users/corey/Projects/p5.js/src/color/color_conversion.js',
  '/Users/corey/Projects/p5.js/src/color/creating_reading.js',
  '/Users/corey/Projects/p5.js/src/color/p5.Color.js',
  '/Users/corey/Projects/p5.js/src/color/setting.js',
  '/Users/corey/Projects/p5.js/src/image/filters.js',
  '/Users/corey/Projects/p5.js/src/image/image.js',
  '/Users/corey/Projects/p5.js/src/image/loading_displaying.js',
  '/Users/corey/Projects/p5.js/src/image/p5.Image.js',
  '/Users/corey/Projects/p5.js/src/image/pixels.js',
  '/Users/corey/Projects/p5.js/src/math/calculation.js',
  '/Users/corey/Projects/p5.js/src/math/math.js',
  '/Users/corey/Projects/p5.js/src/math/noise.js',
  '/Users/corey/Projects/p5.js/src/math/p5.Vector.js',
  '/Users/corey/Projects/p5.js/src/math/random.js',
  '/Users/corey/Projects/p5.js/src/math/trigonometry.js',
  '/Users/corey/Projects/p5.js/src/core/init.js' ]
>> Module /Users/corey/Projects/p5.js/lib/modules/p5Custom.pre-min.js created.

Running "uglify:dist" (uglify) task
>> Destination lib/p5.min.js not written because src files were empty.
>> 1 files created 1.37 MB → 211.68 kB

Done.

Check output size from direct uglifyjs p5Custom.js run 

$ ./node_modules/uglify-js/bin/uglifyjs ./lib/modules/p5Custom.js -o ./lib/modules/p5Custom.test.js -c
$ ls -lh ./lib/modules/
2.5M p5Custom.js
207K p5Custom.min.js
1.3M p5Custom.pre-min.js
> 1.2M p5Custom.test.js

Peace 🖖

@coreygo coreygo mentioned this issue Aug 19, 2019
Merged
@coreygo
Copy link
Contributor Author

coreygo commented Aug 31, 2019

Resolved with the merge of #3956 (review).

@coreygo coreygo closed this as completed Aug 31, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Build Process
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@coreygo @outofambit