diff --git a/content/configuration/index.md b/content/configuration/index.md index 035e69775f83..dde8ac8ee597 100644 --- a/content/configuration/index.md +++ b/content/configuration/index.md @@ -282,6 +282,19 @@ T> Notice that throughout the configuration we use Node's built-in [path module] }, + [performance](/configuration/performance): { +
[hints](/configuration/performance#performance-hints): "warning", // enum + [hints](/configuration/performance#performance-hints): "error", // emit errors for perf hints + [hints](/configuration/performance#performance-hints): false, // turn off perf hints +
+ [maxAssetSize](/configuration/performance#performance-maxassetsize): 200000, // int (in bytes), + [maxEntrypointSize](/configuration/performance#performance-maxentrypointsize): 400000, // int (in bytes) + [assetFilter](/configuration/performance#performance-assetfilter): function(assetFilename) { + // Function predicate that provides asset filenames + return assetName.endsWith('.css') || assetName.endsWith('.js'); + } + }, +
[devtool](/configuration/devtool): "source-map", // enum [devtool](/configuration/devtool): "inline-source-map", // inlines SourceMap into orginal file [devtool](/configuration/devtool): "eval-source-map", // inlines SourceMap per module @@ -338,7 +351,8 @@ T> Notice that throughout the configuration we use Node's built-in [path module] // ... ], // list of additional plugins - + +
/* Advanced configuration (click to show) */ [resolveLoader](/configuration/resolve#resolveloader): { /* same as resolve */ } diff --git a/content/configuration/performance.md b/content/configuration/performance.md new file mode 100644 index 000000000000..e8e7685d6f10 --- /dev/null +++ b/content/configuration/performance.md @@ -0,0 +1,97 @@ +--- +title: Performance +sort: 14 +contributors: + - thelarkinn +--- + +These options allows you to control how webpack notifies you of assets and entrypoints that exceed a specific file limit. +This feature was inspired by the idea of [webpack Performance Budgets](https://github.com/webpack/webpack/issues/3216). + +## `performance` + +`object` + +Configure how performance hints are shown. For example if you have an asset that is over 250kb, webpack will emit a warning notifiying you of this. + + +## `performance.hints` + +`boolean | "error" | "warning"` + +Turns hints on/off. In addition, tells webpack to throw either an error or a warning when hints are found. This property is set to `"warning"` by default. + +Given an asset is created that is over 250kb: + +```js +performance: { + hints: false +} +``` + +No hint warnings or errors are shown. + +```js +performance: { + hints: "warning" +} +``` + +A warning will be displayed notifying you of a large asset. We recommend something like this for development environments. + +```js +performance: { + hints: "error" +} +``` + +An error will be displayed notifying you of a large asset. We recommend using `hints: "error"` during production builds to help prevent deploying production bundles that are too large, impacting webpage performance. + +## `performance.maxEntrypointSize` + +`int` + +An entrypoint represents all assets that would be utilized during initial load time for a specific entry. This option controls when webpack should emit performance hints based on the maximum entrypoint size. The default value is `250000` (bytes). + +```js +performance: { + maxEntrypointSize: 400000 +} +``` + +## `performance.maxAssetSize` + +`int` + +An asset is any emitted file from webpack. This option controls when webpack emits a performance hint based on individual asset size. The default value is `250000` (bytes). + + +```js +performance: { + maxAssetSize: 100000 +} +``` + +## `performance.assetFilter` + +`Function` + +This property allows webpack to control what files are used to calculate performance hints. The default function is seen below: + +```js +function(assetFilename) { + return !(/\.map$/.test(assetFilename)) +}; +``` + +You can override this property by passing your own function in: + +```js +performance: { + assetFilter: function(assetFilename) { + return assetFilename.endsWith('.js'); + } +} +``` + +The example above will only give you performance hints based on `.js` files.