在不安装引用模块的情况下捆绑 dll 资产的想法

Posted 2023-02-19

【中文标题】在不安装引用模块的情况下捆绑 dll 资产的想法

【英文标题】：Ideas for bundling dll assets without installing referenced modules

【发布时间】：2018-03-17 00:50:52

【问题描述】：

所以我们正在开发一个使用 React 和 Webpack 的站点生成器。该工具带有一个设计器，可让您添加第三方 npm 插件并在 React 代码 sn-ps 中使用它们。

最终用户可以对各种站点模板进行更改，然后该工具使用 webpack 在我们的服务器上编译站点包，并将它们部署在用户选择的云主机上。用户还可以在部署之前在我们的服务器上预览站点更改。

到目前为止，我们的策略是为每个站点生成一个 package.json 和 webpack.config 文件，然后运行 ​​webpack。这有效，但速度很慢。现在我们的计划是使用DllPlugin 和DllReferencePlugin 为我们添加到站点模板代码的基线 package.json 的那些包预先创建 dll 脚本。根据我们的实验，这应该会大大缩短网站构建时间。

但是，这种策略在另一种情况下会失败......最终用户可以将她选择的 npm 包添加到她的站点并在站点的代码中引用它们。我们目前必须对用户包执行两个步骤 -

我们需要yarn install 包裹（当然！）。 我们需要将它们全部捆绑到一个 dll 中，以便后续构建速度更快。

我们注意到大部分时间都花在 #1 上，有时在 yarn 安装包时会花费几分钟。然后需要更多时间来完成#2。我们一直在尝试通过使用我们自己的 webpack-dll 服务实例将 dll 生成卸载到它并将清单下载到站点的 webpack 设置来减少 #2。这还具有为新请求重用缓存结果的好处。

所以理论上，我们不需要安装用户包，因为它们已经预先捆绑在 dll 中，从而为我们在捆绑阶段节省了大量时间。 但是，通过对 DllPlugin 和 DllReferencePlugin 工作方式的一些实验，很明显即使我们有包的清单和 dll 文件，除非安装它们，否则 webpack 不会捆绑它们。

我的猜测是由于dll包不存储捆绑包的入口点信息，webpack必须解析已安装包的package.json文件，查找main（或其他入口点），然后检查它们是否在 dll 清单中。从本质上讲，这意味着还必须先安装预先捆绑的软件包。

所以我邀请 webpack 专家提供一些指导。我们还研究了其他方法，例如 codesandbox 的客户端捆绑，这非常聪明，但不适合我们基于服务器的构建过程。

谢谢！

【参考方案1】：

这是一个非常有趣的问题，可以通过多种不同的方式解决，每种方式都有其权衡。

我们在 CodeSandbox 中使用的 dll 服务 (webpack-dll-prod.herokuapp.com) 也被 WebpackBin 使用，它在服务器端使用它（使用 dll 插件）。你可以在这里找到源代码：https://github.com/christianalfoni/webpack-bin。 webpack-dll 方法的缺点是我们手动添加所有可能的条目，这会使捆绑包变得非常大，并且在极少数情况下无法捆绑。

我正在写一篇关于解决此问题的不同方法的 Medium 帖子，尚未完成，但您可以在此处查看草稿：https://medium.com/@ives.v.h/how-we-make-npm-packages-work-in-the-browser-6ce16aa4cee6。也许它为如何解决这个问题提供了一些灵感。

【讨论】：

谢谢@Ives！你认为有可能使用 webpack-dll-service 产生的externals 信息，通过插件让 webpack 知道这些条目吗？目前沙盒在客户端使用该信息。到目前为止，我还没有写过任何 webpack 插件来评论这种插件的可能性。

我相信你可以在 DllReferencePlugin 中传递清单，就像这里：github.com/christianalfoni/webpack-bin/blob/…。我们专门为 CodeSandbox 添加了外部信息，因此 DllReferencePlugin 甚至不需要它。

是的，我们正在这样做，但是如果未安装捆绑包，webpack 将无法找到入口点。安装捆绑包后，它就像任何其他 dll 包一样工作。