javascript - webpack common chunks 插件 vs webpack d

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

最佳答案

对不起,答案很长,但我们希望它可以帮助使事情更清楚。

CommonsChunkPlugin 原理

项目作者定义了许多应用程序入口点,每个入口点都会生成一个包。典型示例是 vendorpolyfillsmain,但例如,您的应用可以拆分为几个独立的“区域”,以便分别加载(例如登录、主要、设置)。

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

那么插件的职责就是分析收集这些通用代码,然后放到定义好的bundle中。每次您开始新构建时,所有此类分析和工作都会一次又一次地发生,并且 - 在监视模式下 - 当您修改共享的代码并且碰巧落入公共(public) bundle 时。

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

DllPlugin 原理

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

所谓的 DLLs 需要第一个 webpack 构建配置,这有点类似于之前看到的公共(public)代码,但不完全一样。据我了解,DLL 大多倾向于对第 3 方代码( vendor 和 polyfill)进行分组,而不是您自己的共享实用程序代码,但这也是一种印象,而不是严格的规则。无论如何,这里的项目作者应该对在正常开发 session 期间更改频率较低的代码进行分组。在开发环境中,这个想法是每隔一段时间运行一次这个构建,例如当依赖项发生变化时。通常由开发人员在他/她认为需要时触发此构建。

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


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

HTH

关于javascript - webpack common chunks 插件 vs webpack dll 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41890855/

相关文章:

visual-studio-2010 - Visual Studio 解决方案文件 - "Build

python - 在不运行测试的情况下制作(从源代码安装)python

ios - 创建 CocoaPods 项目的 iOS 模拟器构建

c - 这个错误是什么意思: `somefile.c:200: error: the frame s

go - 如何使用 Golang 包以外的名称构建可执行文件

android - 如何以编程方式读取我的 Android apk 的构建日期?

gcc - 在 cmake 中检查 gcc 次要

android - com.android.ddmlib.AdbCommandRejectedExc

build-process - 改进您的构建过程

android - Visual Studio 2015 Xamarin 部署失败,没有任何错误消息