From 04463896b9fa42343e4781fef913e47d12dbe982 Mon Sep 17 00:00:00 2001 From: xp44mm <34696643@qq.com> Date: Sat, 14 Nov 2020 15:25:21 +0800 Subject: [PATCH] Update tree-shaking.md --- src/content/guides/tree-shaking.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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.