我正在向使用 npm 和 webpack 的现有项目添加一些可选功能。此功能使用了一个相当大的模块（确切地说是 tfjs），我想在默认情况下阻止加载它，因为它大约使应用程序的有效负载加倍。理想情况下，我可以为导航到此功能的用户动态导入它。
无论如何，我是第一个承认我在这里完全超出了我的深度的人。特别是我对 webpack 不是很精通。所以我的问题是：
动态加载 npm 模块依赖的一般策略是什么？
我看过代码拆分——这似乎只适用于源而不是依赖项。我正在考虑使用单独的 package.json 和 node_modules/ 创建一个子目录并将它们导出为静态资源。
【问题讨论】：
标签： javascript typescript webpack tensorflow.js
代码拆分应该真的适合你！它适用于源，但它只会将每个源实际使用的依赖项捆绑到一个块中。因此，如果您只是确保仅在使用它的页面上导入依赖项并正确设置代码拆分，您应该会得到上面描述的行为。如果没有有关您的项目结构的更多详细信息，实际上不可能使用确切的 webpack 配置给出更详细的答案（老实说，即使您确实提供了该详细信息，我也可能不会花时间为您设置它）但是我认为通过代码拆分，您走在了正确的轨道上。
【讨论】：
是的，正如 schu34 所说，你绝对是在正确的轨道上。
总的来说，设置基本上是：
1) 确保该库已通过另一个模块或脚本标记加载到您的页面上。它应该暴露在window 对象上。例如，jQuery 在大多数网站上都以window.$ 和window.jquery 的形式公开，并且两者都有效。
2) 将库安装为开发依赖项
3) 在 Webpack 中，将库配置为外部。这将允许您在源代码中导入库而不将其包含在输出中。见：Webpack Externals
4) 如果您使用 Flow，这可能有点棘手。在这种情况下，我倾向于只创建一个 const (const $ = window.$)，因为我很懒，但有更好的解决方案可用。
我希望这会有所帮助。
【讨论】：