From 8318499d963538ced10a919118443de8fa3a7c72 Mon Sep 17 00:00:00 2001 From: Yoriiis Date: Mon, 1 Jun 2020 13:05:56 +0200 Subject: [PATCH] Update caching documentation --- README.md | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index f2b3fcc..b698f10 100644 --- a/README.md +++ b/README.md @@ -146,7 +146,7 @@ new SvgChunkWebpackPlugin({ `Object` -SVG sprites are built using the svgstore package. Tells the plugin whether to personalize the default settings for [svgstore](https://github.com/svgstore/svgstore). +SVG sprites are built using the svgstore package. Tells the plugin whether to personalize the default settings for [svgstore](https://github.com/svgstore/svgstore#options). > Sprites already contain minimal inline styles to hide the sprite on the page to keep full support with all SVG features. To avoid LinearGradient conflicts, avoid the `display: none` property which break SVG defs. @@ -194,17 +194,19 @@ new SvgChunkWebpackPlugin({ ![Sprites preview](./example/sprites-preview.png) -### Caching +--- + +## Caching -With [Webpack caching](https://webpack.js.org/guides/caching), several placeholders are available depending on your needs. +With [Webpack caching](https://webpack.js.org/guides/caching), several placeholders are available depending on your needs. With SVG inlined in the page, this option is not useful. > 💡 The `[contenthash]` placeholder is the best option because it depends on the sprite content. > > Cache placeholders are expensive in build performance, use it only in production mode. -> -> With SVG inlined in the page, this option is not useful. -The `[hash]` placeholder will add a unique hash based on the Webpack compilation hash. When the compilation build is updated, `[hash]` will change as well. See the [`stats.hash`](https://webpack.js.org/configuration/stats/#statshash) on the webpack documentation. +### `[hash]` + +The `[hash]` placeholder will add a unique hash generated for every build. When the compilation build is updated, `[hash]` will change as well. See the [`stats.hash`](https://webpack.js.org/configuration/stats/#statshash) on the webpack documentation. ```javascript new SvgChunkWebpackPlugin({ @@ -212,7 +214,9 @@ new SvgChunkWebpackPlugin({ }); ``` -The `[chunkhash]` placeholder will add a unique hash based on the content of the entrypoint. When the entrypoint's content changes, `[chunkhash]` will change as well. +### `[chunkhash]` + +The `[chunkhash]` placeholder will add a unique hash based on the content of the entrypoint. When the entrypoint's content changes, `[chunkhash]` will change as well. All the entrypoint dependencies will have the same hash. ```javascript new SvgChunkWebpackPlugin({ @@ -220,6 +224,8 @@ new SvgChunkWebpackPlugin({ }); ``` +### `[contenthash]` + The `[contenthash]` placeholder will add a unique hash based on the content of the sprite. When the sprite's content changes, `[contenthash]` will change as well. ```javascript