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

How to reduce webpack dev server rebuild time

本文关键字：重建 时间 服务器 开发 何减少 webpack      更新时间：2023-09-26

我正在开发一个在本地使用大型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 手表忽略插件来忽略我的资产文件夹和节点模块：

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

但是，这也不会减少构建时间。我提交了一个错误，因为该插件似乎根本没有做任何事情。

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

我

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

相关文章：