时间戳

首页 > 解决方案 > 我们的第三方 javascript 依赖项导出了一个 50KB 的默认对象，如何让 webpack 只在包中包含部分对象？

javascript - 我们的第三方 javascript 依赖项导出了一个 50KB 的默认对象，如何让 webpack 只在包中包含部分对象？

问题描述

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

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

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

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

捆绑分析显示缩小后的 50kb 导入

有没有办法部分地导入或引入这个对象，这样在被 webpack 打包后，只有MessagesBubbleSquareText对象的一部分会包含在最终的包中？

本质上，我们是否可以通过仅包含我们实际使用的 SVG 数据来缩小我们的生产包？

标签： javascriptwebpack

解决方案

我在那里没有帐户，但如果他们以正确的方式实施摇树，您可以尝试：

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

或类似的东西。不知道导入是如何工作的，因为我找不到这个 npm 包的 gitrepo

推荐阅读