From ad3d12e22f6cc5d17759392be1fe655775554031 Mon Sep 17 00:00:00 2001 From: Sean Larkin Date: Thu, 15 Dec 2016 11:43:54 -0600 Subject: [PATCH 1/2] docs(performance): Add performance config documentation --- content/configuration/index.md | 16 ++++- content/configuration/performance.md | 97 ++++++++++++++++++++++++++++ 2 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 content/configuration/performance.md 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..9ce81c4e56f0 --- /dev/null +++ b/content/configuration/performance.md @@ -0,0 +1,97 @@ +--- +title: Performance +sort: 14 +contributors: + - thelarkinn +--- + +The 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. \ No newline at end of file From fbb01d442d3023d674cee6ce5f5ba172c12b784b Mon Sep 17 00:00:00 2001 From: Sean Larkin Date: Thu, 15 Dec 2016 12:00:38 -0600 Subject: [PATCH 2/2] Update performance.md typo --- content/configuration/performance.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/configuration/performance.md b/content/configuration/performance.md index 9ce81c4e56f0..e8e7685d6f10 100644 --- a/content/configuration/performance.md +++ b/content/configuration/performance.md @@ -5,7 +5,7 @@ contributors: - thelarkinn --- -The options allows you to control how webpack notifies you of assets and entrypoints that exceed a specific file limit. +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` @@ -94,4 +94,4 @@ performance: { } ``` -The example above will only give you performance hints based on `.js` files. \ No newline at end of file +The example above will only give you performance hints based on `.js` files.