webpack common chunks 插件 vs webpack dll 插件

webpack common chunks plugin vs webpack dll plugin

在我使用 webpack common chunks 插件创建包含第三方库的供应商包之前 angular,react,lodash 等,但后来我知道了 webpack dll 插件。他们似乎做同样的事情,但 dll 插件还可以让你减少构建时间。所以我很困惑我是否需要同时使用这两个插件。我是否应该使用通用块插件在生产构建中创建供应商包,在开发构建中使用 dll 插件。或者我应该在生产和开发版本中使用 dll 插件?你能解释一下吗?

你使用一个或另一个。 Here is an article,它描述了如何使用 DllPlugin,在页面底部您可以看到完成相同事情的替代方法。它告诉你有什么区别以及优点和缺点。这应该可以帮助您入门。

我也在寻找这里的区别,但我真的不认为是这种情况。至少,现在不是了。

如果您查看代码拆分库的 webpack documenation,它提到了一种提取类似清单文件的方法。根据我的理解,这就是 DllPlugin 正在做的事情,只是它在 CommonsChunkPlugin 中稍微隐含一些。

好处是您无需为此类功能维护多个 Webpack 配置。

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

CommonsChunkPlugin 原理

项目作者定义了许多应用程序入口点,每个入口点将生成一个包。典型示例是 vendorpolyfillsmain,但例如您的应用程序可以拆分为多个独立的"areas" 单独加载是有意义的(例如登录、主要、设置)。

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

然后插件负责分析和收集这些通用代码,然后将其放入定义的包中。每次你开始一个新的构建时,所有这些分析和工作都会一次又一次地发生,并且 - 在监视模式下 - 当你修改共享的代码并且恰好落入公共包时。

这样的拆分对于开发构建和生产构建都有用。但是对于开发环境,我们只说重建与供应商和 polyfills 相关的代码可能需要相当长的时间,而且当你没有真正改变这些部分时,这可能是一种浪费(假设你依赖的第 3 方代码大于你的自己的代码库)。

DllPlugin 原理

给定相同的环境,例如开发,项目作者创建了两个 webpack 配置,而以前只有一个。该插件可以应用于生产环境,尽管可以说 DllPlugin 在开发中更有意义(见下文)。

所谓的 DLL 需要首先进行 webpack 构建配置,这有点接近之前看到的公共代码,但不完全相同。据我了解,DLL 大多倾向于将第 3 方代码(供应商和 polyfill)分组,而不是您自己的共享实用程序代码,但这更像是一种印象,而不是严格的规则。无论如何,这里的项目作者应该将在正常开发会话期间更改频率低得多的代码分组。在开发环境中,这个想法是 运行 每隔一段时间构建一次,例如当依赖项发生变化时。通常由开发人员在 s/he 认为需要时启动此构建。

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


所以,总而言之,它们看起来很相似,但它们让你达到了不同的目标。这么多,你可以考虑在你的开发环境中使用 DllPlugin(优点:编译时间短),而在生产环境中使用 CommonsChunkPlugin(优点:应用程序更改时加载时间短)。同样,您也可以在生产环境中使用 DllPlugin,但是不得不 运行 连续构建两个版本会带来一些不便:一个用于 DLL,下一个用于应用程序。

HTH