1

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

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

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

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

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

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

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

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

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

谢谢！

4

1 回答 1

2

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

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

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

于 2017-10-05T12:33:14.663 回答