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

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。

How to reduce webpack dev server rebuild time