Our third party javascript dependency exports a default object that's 50KB, how to get webpack to only include part of the object in the bundle?

Question

Our code depends on the streamlinehq/streamline-regular javascript package. This package is both third party, and proprietary, meaning that we can not fork it nor edit it.

We have debug.js example code like so:

import MessagesSpeechBubbles from '@streamlinehq/streamline-regular/lib/messages-chat-smileys/MessagesSpeechBubbles';
window.console.log(MessagesSpeechBubbles.MessagesBubbleSquareText);

Looking at MessagesSpeechBubbles js file, it is exporting a massive default object with SVG data for each different type of speech bubble, totaling 50kb after minification. For reference see the output of bundle analysis:

Is there some way to import or bring in this object partially, such that after being bundled by webpack, only the MessagesBubbleSquareText part of the object would be included in the final bundle?

Essentially is there some way we can shrink our production bundle by only including SVG data that we're actually using?

Answer 1

i don't have an account there, but if they implemented tree shaking the right way you may try:

import { MessagesBubbleSquareText } from '@streamlinehq/streamline-regular';
window.console.log(MessagesBubbleSquareText);

or something like that. don't know how the import works as i can't find a gitrepo for this npm package

Answer 2

There's no way to split apart objects with some kind of tree shaking in javascript. Tree shaking can only make it so that only the objects and functions that are necessary are included in the production bundle, but if you have a giant "mega object" that you import, it can't include only part of it.

In order to make your libraries practical to use, it's important to write them such that they export a number of small objects, rather than one big giant default object.