diff --git a/packages/document/builder-doc/docs/en/config/output/assetsRetry.md b/packages/document/builder-doc/docs/en/config/output/assetsRetry.md index 55bfcae8bab2..65293f8ea84a 100644 --- a/packages/document/builder-doc/docs/en/config/output/assetsRetry.md +++ b/packages/document/builder-doc/docs/en/config/output/assetsRetry.md @@ -227,3 +227,31 @@ export default { After adding the above configuration, the runtime code of `assetsRetry` will be extracted into a separate `assets-retry.[version].js` file and output to the dist directory. The downside is that `assets-retry.[version].js` itself may fail to load. If this happens, the assets retry will not work. Therefore, we prefer to inline the runtime code into the HTML file. + +### Notes + +When you use `assetsRetry`, the Builder injects some runtime code into the HTML and serializes the `assetsRetry` config, inserting it into the runtime code. Therefore, you need to be aware of the following: + +- Avoid configuring sensitive information in `assetsRetry`, such as internal tokens. +- Avoid referencing variables or methods outside of `onRetry`, `onSuccess`, and `onFail`. +- Avoid using syntax with compatibility issues in `onRetry`, `onSuccess` and `onFail` as these functions are inlined directly into the HTML. + +Here's an example of incorrect usage: + +```js +import { someMethod } from 'utils'; + +export default { + output: { + assetsRetry: { + onRetry() { + // Incorrect usage, includes sensitive information + const privateToken = 'a-private-token'; + + // Incorrect usage, uses an external method + someMethod(privateToken); + }, + }, + }, +}; +``` diff --git a/packages/document/builder-doc/docs/zh/config/output/assetsRetry.md b/packages/document/builder-doc/docs/zh/config/output/assetsRetry.md index 7ebce2898c32..17f66ea00a42 100644 --- a/packages/document/builder-doc/docs/zh/config/output/assetsRetry.md +++ b/packages/document/builder-doc/docs/zh/config/output/assetsRetry.md @@ -227,3 +227,31 @@ export default { 添加以上配置后,`assetsRetry` 的运行时代码会被抽取为一个独立的 `assets-retry.[version].js` 文件,并输出到产物目录下。 这种方式的弊端在于,`assets-retry.[version].js` 自身有加载失败的可能性。如果出现这种情况,静态资源重试的逻辑就无法生效。因此,我们更推荐将运行时代码内联到 HTML 文件中。 + +### 注意事项 + +当你使用 `assetsRetry` 时,Builder 会向 HTML 中注入一段运行时代码,并将 `assetsRetry` 配置的内容序列化,插入到这段代码中,因此你需要注意: + +- 避免在 `assetsRetry` 中配置敏感信息,比如内部使用的 token。 +- 避免在 `onRetry`,`onSuccess`,`onFail` 中引用函数外部的变量或方法。 +- 避免在 `onRetry`,`onSuccess`,`onFail` 中使用有兼容性问题的语法,因为这些函数会被直接内联到 HTML 中。 + +以下是一个错误示例: + +```js +import { someMethod } from 'utils'; + +export default { + output: { + assetsRetry: { + onRetry() { + // 错误用法,包含了敏感信息 + const privateToken = 'a-private-token'; + + // 错误用法,使用了外部的方法 + someMethod(privateToken); + }, + }, + }, +}; +```