I read here that import * as blah from 'blah' is not the best idea because it imports everything, which can bloat your JS files. I presume because Javascript isn't typed the unused functions are difficult to optimise away.
Firstly, is this true, or should I not worry about this as "webpack" (which I think is the thing that builds my React app) will just remove all the unused functions?
And secondly, if I really should avoid import * as blah from 'blah', how can I change this so that I only import the functions I need without refactoring all my code? I'd prefer to keep the blah.??? syntax, but import { alice, bob } as blah from 'blah' doesn't work and import { alice, bob } from 'blah' breaks all my code that was previously referring to blah.alice but now just be changed to be just alice only (I actually prefer the prefix syntax for this collection of functions).
The best thing I can think of is to make your own object and make sure to keep it in sync with the imports
// blah.js
const alice = () => "alice";
const bob = () => "bob";
const charlie = () => "charlie";
export { alice, bob, charlie };
// index.js
import { alice, bob } from "./blah";
const blah = { alice, bob };
// Even better, do this:
// const blah = Object.freeze({ alice, bob });
// to avoid accidentally rewriting the methods
console.log(blah.alice());
console.log(blah.bob());
You can see this working in a CodeSandbox here
This is definitely the simplest solution, though probably not the best. However, it does get the desired result.