Skip to content

Minimize Tone.js Imports #3

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.

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

Open
ogbabydiesal opened this issue May 31, 2024 · 2 comments
Open

Minimize Tone.js Imports #3

ogbabydiesal opened this issue May 31, 2024 · 2 comments
Assignees
Labels
question Further information is requested

Comments

@ogbabydiesal
Copy link
Collaborator

can I import specific modules from tone in each class instead of the whole library each time?

Would that make the library smaller?

Would it be faster?

Is there a case to be made that it is more legible that way?

@ogbabydiesal ogbabydiesal self-assigned this May 31, 2024
@ogbabydiesal ogbabydiesal added the question Further information is requested label Jun 7, 2024
@ogbabydiesal
Copy link
Collaborator Author

have answered some of these questions, library now imports only what is necessary from Tone, but if anyone would like to work on minimizing the library through more efficient imports or build solution, that would be superb 🥺

@lvdopqt
Copy link

lvdopqt commented Apr 30, 2025

Adding the visualizer to the rollup we can generate the bundle report visualization

import { visualizer } from 'rollup-plugin-visualizer';
...
mangle: false,
        format: {
          beautify: true,
          comments: true,
          indent_level: 2,
          wrap_iife: true
        }
      }),
      visualizer({
        filename: 'dist/bundle-report.html',
        title: 'p5.sound Bundle Visualizer',
        gzipSize: true,
        brotliSize: true,
        open: true
      }),
    ],
...

I've added it here for us to see it
Let's break it down a little

Overall Bundle Size:
  Rendered: 916231 bytes
  Gzip: 227652 bytes
  Brotli: 194025 bytes

Largest Files (Top 10):
  standardized-audio-context/build/es2019 -> module.js -> module.js: Rendered - 23838 bytes, Gzip - 3202 bytes, Brotli - 2886 bytes
  tone/build/esm -> core -> Transport.js: Rendered - 23087 bytes, Gzip - 5269 bytes, Brotli - 4543 bytes
  standardized-audio-context/build/es2019 -> factories -> native-audio-worklet-node-faker-factory.js: Rendered - 22206 bytes, Gzip - 3439 bytes, Brotli - 3003 bytes
  tone/build/esm -> core -> Param.js: Rendered - 19545 bytes, Gzip - 3632 bytes, Brotli - 3090 bytes
  tone/build/esm -> core -> IntervalTimeline.js: Rendered - 17766 bytes, Gzip - 3172 bytes, Brotli - 2700 bytes
  tone/build/esm -> core -> Context.js: Rendered - 17574 bytes, Gzip - 4097 bytes, Brotli - 3467 bytes
  tone/build/esm -> component -> Envelope.js: Rendered - 17173 bytes, Gzip - 3793 bytes, Brotli - 3334 bytes
  standardized-audio-context/build/es2019 -> factories -> native-stereo-panner-node-faker-factory.js: Rendered - 17164 bytes, Gzip - 1980 bytes, Brotli - 1691 bytes
  standardized-audio-context/build/es2019 -> factories -> audio-worklet-node-renderer-factory.js: Rendered - 15772 bytes, Gzip - 2698 bytes, Brotli - 2379 bytes
  standardized-audio-context/build/es2019 -> factories -> audio-node-constructor.js: Rendered - 14948 bytes, Gzip - 2449 bytes, Brotli - 2167 bytes

Not sure if there's space for more efficient imports rn, because I think the current approach using like import {x,y,z} from tone alongside with the rollup treeshake: {preset: 'recommended', } already do the trick!
But I think there's space for reimplementation of some modules (of course there's some trade-offs on it too), and also splitting the build. After implementing what you proposed in #15 and in #16 we could generate splitted builds (core, effects, sources), so we could import it as needed instead of the whole thing, but this also comes with downsides.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants