webpack common chunks plugin vs webpack dll plugin

pav*_*991 29 javascript build webpack webpack-2 webpack-plugin

之前我使用webpack common chunks插件来创建包含第三方库(如angular,react,lodash等)的供应商包,但后来我知道了webpack dll插件.他们似乎做同样的事情但dll插件也允许你减少构建时间.所以我很困惑我需要将这两个插件一起使用.我应该使用常见的块插件来在生成构建中创建供应商包并在开发构建中创建dll插件.或者我应该在生产和开发构建中使用dll插件?你能解释一下吗?

sup*_*jos 32

很抱歉很长的答案,但我们希望它可以帮助让事情变得更清晰.

CommonsChunkPlugin理由

项目作者定义了许多将生成捆绑的应用程序入口点.典型的例子是供应商,polyfills,main,但是例如你的应用程序可以分成几个独立的"区域",这些区域有意义单独加载(例如登录,主要,设置).

然后,项目作者定义哪些捆绑包或单独捆绑包应包含所有捆绑包共有的代码.这是所有入口点的第三方库和您自己的共享实用程序.

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

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

DllPlugin理由

给定相同的环境,例如开发,项目作者创建两个 webpack配置,其中曾经有一个.该插件可以应用于生产环境,虽然可以说DllPlugin在开发中更有意义(见下文).

所谓的DLL需要第一个webpack构建配置,它们与之前看到的公共代码很接近,但并不完全相同.根据我的理解,DLL主要倾向于将第三方代码(供应商和polyfill)分组,而不是您自己的共享实用程序代码,但这又是一种印象,而不是严格的规则.无论如何,这里的项目作者应该在正常的开发会话期间对更改频率更低的代码进行分组.在开发环境中,这个想法是每隔一段时间运行一次这个构建,例如当依赖项发生变化时.并且通常由开发人员在他/她认为需要时触发此构建.

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


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

HTH


use*_*375 11

你使用其中一个.这篇文章描述了如何在页面底部使用DllPlugin,你可以看到完成同样事情的替代方法.它告诉您差异是什么以及优缺点.这应该让你开始.