如何减少 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\/*/ ),

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

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

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

然而，这也不会减少构建时间。我提交了一个错误，因为看起来插件实际上根本没有做任何事情。

Answer 1

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

我在这里写下了我目前所知道的一切。