## External CDN Resource Usage

### Version Requirements

- Base library version `>=2.26.0`
- `@ray-js/ray` version `>=1.6.10`
- Developer tools version `>=0.8.4`
- **Cannot be used together with the Tuya CDN feature**

### Feature Description

To reduce the mini app package size, the mini app provides an external CDN static resource feature. You can upload static assets (images, audio, etc.) to your chosen CDN. At runtime, local paths are automatically replaced with the corresponding region-specific CDN URLs.

### Uploading to a CDN

Choose a CDN provider and upload your resources yourself. Popular options include:

- [Tencent Cloud CDN](https://cloud.tencent.com/product/cdn)
- [Alibaba Cloud CDN](https://www.aliyun.com/product/cdn)
- [AWS CloudFront](https://aws.amazon.com/cn/cloudfront/)
- [Cloudflare CDN](https://www.cloudflare.com/cdn/)

### Configure the CDN

#### Project Configuration

Declare the directory containing static resources to upload in `project.tuya.json`.

```json
{
	"projectname": "miniApp",
	"i18n": true,
	"miniprogramRoot": "app/",  # Mini app source code
	"publicRoot": "cdn/",       # Directory containing static assets to upload to CDN
	"projectId": "********",
	"baseversion": "2.10.6",
	"dependencies": {
		"BaseKit": "3.0.3",
		"MiniKit": "3.0.6",
		"BizKit": "3.0.6"
	}
}
```

Create a `cdn` directory in the project root and add a `cdnImage.json` file:

```
├── package.json
├── project.tuya.json
└── cdn
		└── cdnImage.json
```

`cdnImage.json` must define the CDN URLs for each region code:

Region codes to configure:

- AY: China
- AZ: United States
- EU: Europe
- IN: India
- UE: U.S. East
- WE: Western Europe
- RU: Russia

```json
{
	"AY": {
		"/cdn/logo.png": "https://images.tuyacn.com/smart/miniapp/static/1664528993779f7997c9a.png",
		"/cdn/1.png": "https://images.tuyacn.com/smart/miniapp/static/1670384599c63a79781fd.png"
	},
	"AZ": {
		"/cdn/logo.png": "https://usimagesd1448c85ulz2o4.cdn5th.com/smart/miniapp/static/1664528993779f7997c9a.png",
		"/cdn/1.png": "https://usimagesd1448c85ulz2o4.cdn5th.com/smart/miniapp/static/1670384599c63a79781fd.png"
	},
	"EU": {
		"/cdn/logo.png": "https://euimagesd2h2yqnfpu4gl5.cdn5th.com/smart/miniapp/static/1664528993779f7997c9a.png",
		"/cdn/1.png": "https://euimagesd2h2yqnfpu4gl5.cdn5th.com/smart/miniapp/static/1670384599c63a79781fd.png"
	},
	"IN": {
		"/cdn/logo.png": "https://inimagesd1jqokb9wptk2t.cdn5th.com/smart/miniapp/static/1664528993779f7997c9a.png",
		"/cdn/1.png": "https://inimagesd1jqokb9wptk2t.cdn5th.com/smart/miniapp/static/1670384599c63a79781fd.png"
	},
	"UE": {
		"/cdn/logo.png": "https://usimagesd1448c85ulz2o4.cdn5th.com/smart/miniapp/static/1664528993779f7997c9a.png",
		"/cdn/1.png": "https://usimagesd1448c85ulz2o4.cdn5th.com/smart/miniapp/static/1670384599c63a79781fd.png"
	},
	"WE": {
		"/cdn/logo.png": "https://d2h2yqnfpu4gl5.cdn5th.com/smart/miniapp/static/1664528993779f7997c9a.png",
		"/cdn/1.png": "https://d2h2yqnfpu4gl5.cdn5th.com/smart/miniapp/static/1670384599c63a79781fd.png"
	},
	"RU": {
		"/cdn/logo.png": "https://euimagesd2h2yqnfpu4gl5.cdn5th.com/smart/miniapp/static/1664528993779f7997c9a.png",
		"/cdn/1.png": "https://euimagesd2h2yqnfpu4gl5.cdn5th.com/smart/miniapp/static/1670384599c63a79781fd.png"
	}
}
```

**Notes:**

1. The CDN URLs in `cdnImage.json` must exactly match the URLs of the uploaded resources; otherwise replacement will fail.
2. The Europe (EU) region can serve as a fallback if another region's URL is missing.

### Usage in the Project

Image URLs are automatically replaced with the CDN URLs for the current region.

```xml
<view>
	<image src="{{cdn.url('/cdn/logo.png')}}"></image>
</view>
```