docs(builder): add process.env injection guide (#3686)

Author: chenjiahan

packages/document/builder-doc/docs/en/guide/advanced/define.md

@@ -74,7 +74,7 @@ In the production environment, the above code will be compiled as:
 const Image = <img src={`https://example.com/static/icon.png`} />;
 ```
 
-# Using define config
+## Using define config
 
 By configuring the [source.define](/en/api/config-source.html#sourcedefine), you can replace expressions with other expressions or values in compile time.
 
@@ -106,6 +106,27 @@ For more about `source.define`, just refer to [API References](/api/config-sourc
 The environment variable `NODE_ENV` shown in the example above is already injected by the Builder, and you usually do not need to configure it manually.
 :::
 
+### process.env Injection
+
+When using `source.define` or `source.globalVars`, please avoid injecting the entire `process.env` object, e.g. the following usage is not recommended:
+
+```js
+export default {
+  source: {
+    define: {
+      'process.env': JSON.stringify(process.env),
+    },
+  },
+};
+```
+
+If the above usage is adopted, the following problems will be caused:
+
+1. Some unused environment variables are additionally injected, causing the environment variables of the development environment to be leaked into the front-end code.
+2. As each `process.env` code will be replaced by a complete environment variable object, the bundle size of the front-end code will increase and the performance will decrease.
+
+So please avoid full injection, just inject the used variables from `process.env`.
+
 ## Setup Environment Variables
 
 You may often need to set environment variables, in which case you can instead use the [source.globalVars](/en/api/config-source.html#sourceglobalvars) configuration to simplify configuration. It is a syntax sugar of `source.define`, the only difference is that `source.globalVars` will automatically stringify the value, which makes it easier to set the value of global variables and avoid writing a lot of `JSON.stringify(...)` stuffs.

packages/document/builder-doc/docs/zh/guide/advanced/define.md

@@ -106,6 +106,27 @@ export default {
 以上例子中的环境变量 `NODE_ENV` 已经由 Builder 自动注入，通常你不需要手动配置它的值。
 :::
 
+### process.env 注入方式
+
+在使用 `source.define` 或 `source.globalVars` 时，请避免注入整个 `process.env` 对象，比如下面的用法是不推荐的：
+
+```js
+export default {
+  source: {
+    define: {
+      'process.env': JSON.stringify(process.env),
+    },
+  },
+};
+```
+
+如果你采用了上述用法，将会导致如下问题：
+
+1. 额外注入了一些未使用的环境变量，导致开发环境的环境变量被泄露到前端代码中。
+2. 由于每一处 `process.env` 代码都会被替换为完整的环境变量对象，导致前端代码的包体积增加，性能降低。
+
+因此，请按照实际需求来注入 `process.env` 上的环境变量，避免全量注入。
+
 ## 设置环境变量
 
 针对设置环境变量的高频场景，Builder 还提供了 [source.globalVars](/api/config-source.html#sourceglobalvars) 配置用于简化配置，它是 `source.define` 的一个语法糖，唯一的区别是 `source.globalVars` 会自动将传入的值进行 JSON 序列化处理，这使得设置环境变量的值更容易，避免大量书写 `JSON.stringify(...)` 转换语句：