Leí aquí que import * as blah from 'blah' no es la mejor idea porque importa todo , lo que puede inflar sus archivos JS. Supongo que debido a que Javascript no está escrito, las funciones no utilizadas son difíciles de optimizar.
En primer lugar, ¿es esto cierto, o no debería preocuparme por esto ya que "webpack" (que creo que es lo que construye mi aplicación React) simplemente eliminará todas las funciones no utilizadas?
Y en segundo lugar, si realmente debería evitar import * as blah from 'blah' , ¿cómo puedo cambiar esto para que solo importe las funciones que necesito sin refactorizar todo mi código? Prefiero mantener el blah.??? sintaxis, pero import { alice, bob } as blah from 'blah' no funciona e import { alice, bob } from 'blah' rompe todo mi código que anteriormente se refería a blah.alice pero ahora solo se cambia para que sea solo alice solamente (en realidad prefiero la sintaxis de prefijo para esta colección de funciones).
Lo mejor que se me ocurre es crear tu propio objeto y asegurarte de mantenerlo sincronizado con las importaciones.
// 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());Puede ver esto funcionando en un CodeSandbox aquí
Esta es definitivamente la solución más simple, aunque probablemente no sea la mejor. Sin embargo, obtiene el resultado deseado.