11

相关的 webpack/webpack问题。

根据我的经验,在你堆积一定数量的组件和/或依赖项之后,在实际项目中使用 webpack 会减慢速度。我有一个测试存储库,旨在通过以下应用程序证明这一点:

  • 入口点是A.js,它需要B.jsC.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-hotand ,就会失去控制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 中的缓存层应该自己做的事情,那么这里发生了什么?

4

0 回答 0