Skip to content

Instantly share code, notes, and snippets.

What would you like to do?

webpack Build Performance Tips

Limit the number of extensions passed to the resolver

When the resolver is working through its version of the node module resolution algorithm, it has to perform a large number of file system operations to determine what an ambiguous require/import string is. This means, every extension webpack needs to look for can drastically increase the number of disk hits necessary when enhanced-resolve is attempting to locate an import.


Only have webpack's resolver look for the file extensions you use very frequently in your application. For most JS projects, this means using the following webpack config:

resolve: {
    extensions: ['.js'] // webpack's default is [".js", ".json", ".node"]

For all other types of files (json, css, etc) explicitly add the extension in your import/require.

Example Disk Hits - Before/After disk-hits

It's worth noting that this could break dependencies that rely on requiring JSON without a file extension. However, that's not likely to be found in most packages distributed for front-end use.

Be careful with usage of resolve.modules

The modules configuration for enhanced-resolve specifies a list of directories that should always be looked in when resolving modules. This can add thousands of extra hits to the disk during your build. This can be substantially worse when a non-absolute path is used, because enhanced-resolve will keep looking all the way up the file system to the root for that directory.

Make sure you are not abusing resolve.modules in places where resolve.alias would be more appropriate.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment