Skip to content

Instantly share code, notes, and snippets.

@DrewML
Last active July 20, 2017 14:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DrewML/ece553e153aeaaf9371a6400060985b0 to your computer and use it in GitHub Desktop.
Save DrewML/ece553e153aeaaf9371a6400060985b0 to your computer and use it in GitHub Desktop.

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.

Suggestion

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