From c93667be6d2d02779072ca878f80020824495495 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9A=E5=B0=8F=E5=87=AF?= <784487301@qq.com> Date: Wed, 10 Jan 2024 20:24:39 +0800 Subject: [PATCH 1/2] Update tree-shaking.mdx --- src/content/guides/tree-shaking.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/tree-shaking.mdx b/src/content/guides/tree-shaking.mdx index a0c2fcbc6398..41211ea5b846 100644 --- a/src/content/guides/tree-shaking.mdx +++ b/src/content/guides/tree-shaking.mdx @@ -361,7 +361,7 @@ What we've learned is that in order to take advantage of _tree shaking_, you mus - Use ES2015 module syntax (i.e. `import` and `export`). - Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behavior of the popular Babel preset @babel/preset-env - see the [documentation](https://babeljs.io/docs/en/babel-preset-env#modules) for more details). - Add a `"sideEffects"` property to your project's `package.json` file. -- Use the [`production`](/configuration/mode/#mode-production) `mode` configuration option to enable [various optimizations](/configuration/mode/#usage) including minification and tree shaking. +- Use the [`production`](/configuration/mode/#mode-production) `mode` configuration option to enable tree shaking (This is required when webpack version is less than 5.3.0). - Make sure you set a correct value for [`devtool`](/configuration/devtool/#devtool) as some of them can't be used in `production` mode. You can imagine your application as a tree. The source code and libraries you actually use represent the green, living leaves of the tree. Dead code represents the brown, dead leaves of the tree that are consumed by autumn. In order to get rid of the dead leaves, you have to shake the tree, causing them to fall. From d82ef52bf03be9d5778bd24103002ee3745453aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9A=E5=B0=8F=E5=87=AF?= <784487301@qq.com> Date: Thu, 11 Jan 2024 11:17:34 +0800 Subject: [PATCH 2/2] Update tree-shaking.mdx --- src/content/guides/tree-shaking.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/tree-shaking.mdx b/src/content/guides/tree-shaking.mdx index 41211ea5b846..a21ab1a405ee 100644 --- a/src/content/guides/tree-shaking.mdx +++ b/src/content/guides/tree-shaking.mdx @@ -361,7 +361,7 @@ What we've learned is that in order to take advantage of _tree shaking_, you mus - Use ES2015 module syntax (i.e. `import` and `export`). - Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behavior of the popular Babel preset @babel/preset-env - see the [documentation](https://babeljs.io/docs/en/babel-preset-env#modules) for more details). - Add a `"sideEffects"` property to your project's `package.json` file. -- Use the [`production`](/configuration/mode/#mode-production) `mode` configuration option to enable tree shaking (This is required when webpack version is less than 5.3.0). +- Use the [`production`](/configuration/mode/#mode-production) `mode` configuration option to enable [various optimizations](/configuration/mode/#usage) including minification and tree shaking (side effects optimization is enabled in development mode using the flag value). - Make sure you set a correct value for [`devtool`](/configuration/devtool/#devtool) as some of them can't be used in `production` mode. You can imagine your application as a tree. The source code and libraries you actually use represent the green, living leaves of the tree. Dead code represents the brown, dead leaves of the tree that are consumed by autumn. In order to get rid of the dead leaves, you have to shake the tree, causing them to fall.