add a note on defineComponent() treeshaking with webpack

Author: yyx990803

src/api/general.md

@@ -122,6 +122,18 @@ A type helper for defining a Vue component with type inference.
   type FooInstance = InstanceType<typeof Foo>
   ```
 
+  ### Note on webpack Treeshaking
+
+  Because `defineComponent()` is a function call, it could look like that it would produce side-effects to some build tools, e.g. webpack. This will prevent the component from being tree-shaken even when the component is never used.
+
+  To tell webpack that this function call is safe to be tree-shaken, you can add a `/*#__PURE__*/` comment notation before the function call:
+
+  ```js
+  export default /*#__PURE__*/ defineComponent(/* ... */)
+  ```
+
+  Note this is not necessary if you are using Vite, because Rollup (the underlying production bundler used by Vite) is smart enough to determine that `defineComponent()` is in fact side-effect-free without the need for manual annotations.
+
 - **See also:** [Guide - Using Vue with TypeScript](/guide/typescript/overview.html#general-usage-notes)
 
 ## defineAsyncComponent()

src/guide/typescript/overview.md

@@ -129,7 +129,10 @@ export default defineComponent({
 })
 ```
 
-See also: [type tests for `defineComponent`](https://github.com/vuejs/core/blob/main/test-dts/defineComponent.test-d.tsx)
+See also:
+
+- [Note on webpack Treeshaking](/api/general.html#note-on-webpack-treeshaking)
+- [type tests for `defineComponent`](https://github.com/vuejs/core/blob/main/test-dts/defineComponent.test-d.tsx)
 
 :::tip
 `defineComponent()` also enables type inference for components defined in plain JavaScript.