CODEWITHSUNDEEP
javascriptwebpackwebpack-dev-server
Andy Ray
Andy Ray

Reputation: 32066

How to reduce webpack dev server rebuild time

I'm developing a Javascript game that uses large 3d assets locally. I require those assets with webpack, like:

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

As you can see, doing things like this gives me a large initial bundle and large initial build time:

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

I'm OK with the large build time, but the real issue is the rebuild time using the dev server.

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

It takes 10-20 seconds to rebuild the bundle, and even longer to reach the browser. I'd like to reduce this time if possible.

I've tried ignoring my assets folder entirely:

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

But as you might guess, this means I can no longer require() an asset by its loacl path, which is basically the whole point of using webpack.

I've also tried using the webpack watch ignore plugin to ignore my assets folder, and node modules:

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

However this doesn't reduce the build time either. I filed a bug because it appears the plugin doesn't actually do anything at all.

Upvotes: 3

Views: 2425

Answers (1)

Andy Ray
Andy Ray

Reputation: 32066

The best way I've found to significantly reduce hot reload time is to use Webpack's odd "DllPlugin". Basically it builds a static file with all your third party dependencies in it, so Webpack never touches those dependencies again during hot reload.

I wrote up everything I currently know about it here.

Upvotes: 5

Related Questions