我们的第三方 javascript 依赖项导出了一个 50KB 的默认对象

Question

我们的代码依赖于streamlinehq/streamline-regularjavascript 包。这个包既是第三方的又是专有的，这意味着我们不能分叉它也不能编辑它。

我们有这样的debug.js示例代码：

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

查看 MessagesSpeechBubbles js 文件，它正在为每种不同类型的对话气泡导出带有 SVG 数据的大量默认对象，缩小后总计 50kb。作为参考，请参阅捆绑分析的输出：

有什么方法可以部分导入或引入这个对象，这样在被webpack打包后，只有MessagesBubbleSquareText对象的一部分被包含在最终的包中？

本质上，有没有什么方法可以通过只包含我们实际使用的 SVG 数据来缩小我们的生产包？

Answer 1

在 javascript 中没有办法用某种 tree shaking 来分割对象。Tree shaking 只能使生产包中只包含必要的对象和函数，但如果您导入了一个巨大的“mega object”，它不能只包含其中的一部分。为了使您的库实用，重要的是编写它们以导出许多小对象，而不是一个巨大的默认对象。

Answer 2

我在那里没有帐户，但如果他们以正确的方式实施 tree shaking，你可以尝试：import { MessagesBubbleSquareText } from '@streamlinehq/streamline-regular';window.console.log(MessagesBubbleSquareText);或类似的东西。不知道导入是如何工作的，因为我找不到这个 npm 包的 gitrepo