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.