diff --git a/src/content/guides/tree-shaking.md b/src/content/guides/tree-shaking.md index bc0d0578f3bb..7b02c57e2416 100644 --- a/src/content/guides/tree-shaking.md +++ b/src/content/guides/tree-shaking.md @@ -180,7 +180,7 @@ The [`sideEffects`](/configuration/optimization/#optimizationsideeffects) and [` __`sideEffects` is much more effective__ since it allows to skip whole modules/files and the complete subtree. -`usedExports` relies on [terser](https://github.com/terser-js/terser) to detect side effects in statements. It is a difficult task in JavaScript and not as effective as straighforward `sideEffects` flag. It also can't skip subtree/dependencies since the spec says that side effects need to be evaluated. While exporting function works fine, React's Higher Order Components (HOC) are problematic in this regard. +`usedExports` relies on [terser](https://github.com/terser-js/terser) to detect side effects in statements. It is a difficult task in JavaScript and not as effective as straightforward `sideEffects` flag. It also can't skip subtree/dependencies since the spec says that side effects need to be evaluated. While exporting function works fine, React's Higher Order Components (HOC) are problematic in this regard. Let's make an example: @@ -241,7 +241,9 @@ Terser actually tries to figure it out, but it doesn't know for sure in many cas But we can help terser by using the `/*#__PURE__*/` annotation. It flags a statement as side effect free. So a simple change would make it possible to tree-shake the code: -`var Button$1 = /*#__PURE__*/ withAppProvider()(Button);` +```javascript +var Button$1 = /*#__PURE__*/ withAppProvider()(Button); +``` This would allow to remove this piece of code. But there are still questions with the imports which need to be included/evaluated because they could contain side effects.