How to Keep Front‑End Assets Available When a CDN Fails

Introduction

External website front‑end static resources are usually deployed on a CDN to reduce request time and improve first‑paint performance. However, a CDN can become inaccessible, causing the whole site to appear blank.

Using PWA for offline loading is limited by compatibility, so an alternative fallback is needed.

Solution

When a CDN request fails, the resource can be re‑requested from the main domain, ensuring a high probability of successful loading.

Key Resources

HTML – typically served from the main domain via server‑side rendering or async rendering.

JS – requires careful handling to preserve execution order.

CSS

IMG

…

For IMG, the onerror event of <script> and <link> tags can be captured and redirected to the main domain.

JS cannot simply use onerror because execution order must be maintained. The proposed approach:

Detect resource load failure and determine execution order.

If failure is detected, insert a request to the main domain after the original tag, preserving order.

Implementation steps in the build pipeline (IMFLOW based on Webpack):

Insert main‑domain retry logic into the generated HTML template.

When injecting built JS into the template, also embed the failure‑detection logic after each resource tag.

Insert the detection code into the generated JS bundle.

Webpack’s html-webpack-plugin and its hooks (requireEnsure, jsonpScript) allow the retry code to be injected during the runtime bootstrap phase.

Dynamic JS and Template Integration

Dynamic JS loaded via import() or require.ensure() is transformed by Webpack into webpack_require.e(). The retry logic must be added to the runtime bootstrap so that dynamically loaded chunks also fallback to the main domain.

Static resources not generated by the build (e.g., third‑party libraries referenced directly in HTML) require a custom loader to parse the template, convert syntax, and generate production links with hash, then apply the same retry logic.

Data Comparison

Charts show the success rate of CDN resource main‑domain retries.

For detailed implementation, see the @tencent/webpack-cdn-assets-retry-plugin and @tencent/imflow-html-loader projects.