Selective import when bundling?
See original GitHub issueHi. 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:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
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: