如何减少webpack dev服务器重建时间

Question

我正在开发一个在本地使用大型3D资源的Javascript游戏。我需要使用webpack的那些资产，例如：

require('../../assets/models/house.obj')

正如您所看到的，做这样的事情会给我一个大的初始包和大的初始构建时间：

[0]           main-ad421c4138968fe0a8ae.js    14.8 MB       0  [emitted]  main
[0] webpack built ad421c4138968fe0a8ae in 26610ms

我可以使用大型构建时间，但真正的问题是使用开发服务器的重建时间。

[1] [piping] File src/Game.js has changed, reloading.
[0] webpack built 80f5c6c75e347304002c in 10534ms

重建捆绑包需要10-20秒，甚至更长时间才能到达浏览器。如果可能的话，我想减少这段时间。

我试图完全忽略我的资源文件夹：

new webpack.IgnorePlugin( /assets\/*/ ),

但正如你可能猜到的，这意味着我不能再通过其loacl路径require()资产，这基本上是使用webpack的全部要点。

我还尝试使用webpack watch ignore plugin忽略我的资源文件夹和节点模块：

new WatchIgnorePlugin([
    path.resolve( __dirname, '../assets/models/' ),
    path.resolve( __dirname, '../node_modules/' )
]),

然而，这也不会减少构建时间。我filed a bug因为看起来插件根本没有做任何事情。

Answer 1

我发现显着减少热重载时间的最好方法是使用Webpack奇怪的“DllPlugin”。基本上它构建了一个包含所有第三方依赖项的静态文件，因此Webpack在热重新加载期间永远不会再次触及这些依赖项。

我写了我目前所了解的所有内容here。