question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Selective import when bundling?

See original GitHub issue

Hi. I’m new to bundling. Is it possible to only import what it’s used on the app?

This is my test app:

import { AudioContext, AnalyserNode, MediaElementAudioSourceNode } from 'standardized-audio-context';
let playFlag = false;
const clickHandler = () => {
    if (playFlag === false) {
        if (window.audioContext === undefined) {
            const audioContext = new AudioContext();
            window.audioContext = audioContext;
            const audioStream = new Audio();
            audioStream.crossOrigin = 'anonymous';
            audioStream.src = 'http://stream';
            window.audioStream = audioStream;            
            const audioAnalyser = audioContext.createAnalyser();
            const audioSource = audioContext.createMediaElementSource(audioStream);
            audioSource.connect(audioAnalyser);
            audioAnalyser.connect(audioContext.destination);
            const audioBuffer = new Uint8Array(audioAnalyser.frequencyBinCount);
            audioAnalyser.getByteFrequencyData(audioBuffer);
            window.audioBuffer = audioBuffer;
            audioContext.resume();
        }
        window.audioStream.play();
        playFlag = true;
    } else {
        window.audioStream.pause();
        playFlag = false;
    }
};
document.getElementById('player-button').addEventListener('click', clickHandler);

This is my Rollup config:

import resolve from '@rollup/plugin-node-resolve';
export default {
    input: 'app.js',
    output: {
        file: 'bundle.js',
        format: 'iife',
        name: 'bundle'
    },
    plugins: [
        resolve({
            mainFields: ['module', 'browser', 'main']
        })
    ]
};

The resulting bundle includes the whole library. Thanks!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
chrisguttandincommented, Oct 15, 2021

Sorry for the confusion. I tested this with an ancient version (v16) of standardized-audio-context. I get similar numbers with the latest version as you.

0reactions
endlessuniversecommented, Oct 15, 2021

I replaced mediaStream with mediaElement in the second parameter of MediaElementAudioSourceNode constructor.

Just tested and the bundle with the AudioContext version takes up 373963 bytes, while the MinimalAudioContext one takes up 149799 bytes.

The package.json created with yarn:

{
  "dependencies": {
    "@rollup/plugin-node-resolve": "^13.0.5",
    "rollup": "^2.58.0",
    "standardized-audio-context": "^25.3.12"
  }
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Selective Imports - PnP/PnPjs
This concept works well with custom bundling to create a shared package tailored exactly to your needs. If you would prefer to not...
Read more >
Selective player imports for decreasing bundle size · Issue #311
I'm using react-player within a larger react app using webpack for bundling. Is there any way to organize the imports in a way...
Read more >
Code Splitting - webpack
Dynamic Imports: Split code via inline function calls within modules. ... [webpack-cli] Compilation finished asset index.bundle.js 553 KiB [emitted] (name: ...
Read more >
Wildcard or asterisk (*) vs named or selective import es6 ...
In terms of efficiency, say for example, I'm using webpack for bundling all the JavaScript files. Will the first one actually importing everything...
Read more >
Code-splitting for libraries—bundling for npm with Rollup 1.0
Code-splitting with Rollup provides a new way of bundling libraries that can prevent many pit-falls of having several import targets exposed to ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found