Javascript webpack公共块插件与webpack dll插件

在我使用webpack common chunks插件创建包含angular、react、lodash等第三方库的供应商包之前，我知道webpack dll插件。他们似乎做同样的事情，但dll插件也允许您减少构建时间。所以我很困惑我是否需要同时使用这两个插件。我应该在生产构建中使用common chunks插件创建供应商包，在开发构建中使用dll插件吗。或者我应该在生产和开发构建中使用dll插件？你能解释一下吗？

你可以用其中一种，它描述了如何使用DllPlugin和down。在页面底部，您可以看到完成相同任务的其他方法。它告诉你它们的区别以及优缺点。这应该让你开始了。

我也在这里寻找不同之处，但我真的认为情况并非如此。至少，现在不是了

如果您查看代码拆分库的示例，它会提到一种提取类似清单文件的方法。根据我的理解，这就是DllPlugin所做的，只是它在commonchunkplugin中稍微隐式一些

---

这样做的好处是，您不需要为此类功能维护多个网页包配置

很抱歉回答得太长，但希望它能让事情变得更清楚

常识插件原理 项目作者定义了许多应用程序入口点，每个入口点将生成一个捆绑包。典型的示例是供应商、polyfills、main，但例如，您的应用程序可以拆分为几个独立的“区域”，可以单独加载（例如登录、main、设置）

然后，项目作者定义这些捆绑包中的哪一个，或者单独的捆绑包，应该包含所有捆绑包所共有的代码。这通常是第三方库和您自己在所有入口点的共享实用程序

然后插件负责分析和收集这些通用代码，然后将其放入定义的包中。所有这些分析和工作在您每次启动新构建时都会一次又一次地发生，并且在监视模式下，当您修改共享的代码时，这些代码恰好属于commons bundle

这种拆分对于开发构建和生产构建都很有用。但对于开发环境，我们只需说，重新构建与供应商和PolyFill相关的代码可能需要相当长的时间，如果您不真正更改这些部分，这可能是一种浪费（假设您所依赖的第三方代码大于您自己的代码库）

DllPlugin原理 给定相同的环境，例如开发，项目作者创建了两个以前只有一个的网页包配置。该插件可以应用于生产环境，尽管可以说DllPlugin在开发中更有意义（见下文）

所谓的DLL需要第一个webpack构建配置，这有点接近以前看到的commons代码，但不完全相同。据我所知，DLL大多倾向于将第三方代码（供应商和polyfills）分组，而不是您自己的共享实用程序代码，但这更像是一种印象，而不是严格的规则。无论如何，在这里，项目作者应该对在正常开发过程中更改频率低得多的代码进行分组。在dev环境中，我们的想法是每隔一段时间运行一次这个构建，例如当依赖项发生变化时。通常情况下，开发人员在认为需要时启动此构建

另一个webpack构建配置需要用于项目自己的代码，或者在执行开发工作时定期更改的代码。这是开发人员将一次又一次运行的实际构建，或者将在监视模式下运行，此时，与CommonChunk场景中看到的单个构建相比，它应该要快得多

---

所以，总的来说，它们看起来很相似，但它们让你击中不同的目标。这么多，您可以考虑使用DLLAPULIN为您的DEV环境（优势：短编译时间），而使用CuffSununkPuelin进行生产（优势：应用程序更改时的短负载时间）。同样，您也可以在生产环境中使用DllPlugin，但要连续运行两个版本会带来一些小麻烦：一个用于DLL，另一个用于应用程序

---

HTH

实际上，如果使用DllPlugin进行开发，生产构建可以利用相同的预构建DllPlugin输出。这不是真的吗？我不确定我会那样做。通常，在进行生产构建之前，我会包含一个干净的步骤，以确保不会将任何旧的输出带到生产环境中。此外，原则上，我不会混合两个版本的输出（不确定DllPlugin输出在两个版本之间是否发生变化）。是的，您是对的，清除输出目录是一个好习惯。尽管我不认为当环境发生变化时，DllPlugin的输出在不同的版本之间会有所不同（因为“devdependency”超出了它的范围，它只取决于“dependency”），但这样做更好（例如，不是有效的url）。