相关的 webpack/webpack问题。
根据我的经验,在你堆积一定数量的组件和/或依赖项之后,在实际项目中使用 webpack 会减慢速度。我有一个测试存储库,旨在通过以下应用程序证明这一点:
- 入口点是
A.js
,它需要B.js
和C.js
。 B.js
很小,没有很多依赖项。C.js
是单片的,有成千上万的需求。
我的期望是,webpack-dev-server
在测试项目中使用时,每当我 save 时B.js
,webpack 都应该认识到这一点,C.js
并且它的任何依赖项都没有被触及。它应该B.js
快速编译(在 <10ms 内),在缓存中替换它,并使用初始编译A.js
的缓存版本输出编译后的内容。C.js
但是,webpack3002
每次保存时都会编译隐藏模块B.js
,导致编译时间为960ms
. 这本身还不错,但是如果您添加一些加载程序,例如react-hot
and ,就会失去控制babel
。
我确实有一个解决方案:在同一个测试项目上有一个dll
分支。在该分支上,您可以运行webpack --config webpack.dll.config.js
以从中生成两个 DLL,B.js
然后C.js
在编译A.js
. 之后,当使用 时webpack-dev-server
,无论何时保存B.js
,它的 DLL 都会重新编译,A.js
会注意到其中一个 DLL 已更新,它只会获取旧的 DLLC.js
和新的 DLL,B.js
并将它们组合成一个快速快乐的捆绑包。
我可以在那个分支上走得更远,进行目录读取或依赖图遍历,为每个组件生成一个 DLL,这种方法可能适用于每个 webpack 项目。从理论上讲,这应该使编译尽可能快。但在那一点上,在我看来,我似乎已经(糟糕地)重新实现了 webpack 中的缓存层应该自己做的事情,那么这里发生了什么?