LOCALIZE ALL THIRD-PARTY CDN LIBRARIES / PLUGINS
In the admin panel project, there is already an existing folder:
public/cdn/
I want you to audit the ENTIRE project and remove unnecessary runtime dependencies on third-party CDN URLs.
IMPORTANT:
This is NOT about images only.
I specifically mean third-party CSS, JavaScript, fonts, icons, libraries, frameworks, plugins, and other static frontend assets that are currently loaded from external CDNs.
==================================================
1. SCAN THE ENTIRE PROJECT
==================================================
Search the entire codebase for all external CDN/library references, including:
- cdn.jsdelivr.net
- cdnjs.cloudflare.com
- unpkg.com
- bootstrap CDN
- Bootstrap Icons CDN
- Font Awesome CDN
- Google-hosted static assets where they are directly loaded by URL
- AOS CDN
- Swiper CDN
- GSAP CDN
- jQuery CDN
- Popper CDN
- Alpine CDN
- external CSS files
- external JavaScript files
- external font files
- external icon libraries
- external plugin files
- `
AFTER:
If the project uses Next.js/React imports, prefer installing/importing the package locally through the project's package manager when that is the correct architecture.
Do NOT unnecessarily duplicate a library both in node_modules and public/cdn.
Use the cleanest approach based on how the existing project works.
==================================================
4. CSS LIBRARIES
Localize third-party CSS libraries.
Examples:
- Bootstrap
- Bootstrap Icons
- Font Awesome CSS
- Swiper CSS
- AOS CSS
- plugin CSS
- other CDN-hosted stylesheets
Save the required files under:
public/cdn/
and update references to local paths.
Make sure relative asset references inside CSS continue working.
If a CSS file references fonts/images through relative URLs, localize those dependencies too and fix the paths.
==================================================
5. FONTS
If third-party libraries use external font files:
- identify the actual font files
- download/self-host them where legally permitted
- place them under `public/cdn/fonts/`
- update CSS/font-face references
Do not break typography.
Preserve:
- font family
- font weights
- font styles
- font-display
- unicode ranges where applicable
If the project uses Next.js's official font optimization system, do not unnecessarily move those fonts into `public/cdn`.
==================================================
6. ICON LIBRARIES
If icons are being loaded from a third-party CDN:
- identify the exact library/version
- localize the required CSS/font/SVG assets
- place them under `public/cdn/`
- update the application to use local assets
Examples:
- Bootstrap Icons
- Font Awesome
- other icon packs
Do not replace icons with random alternatives.
==================================================
7. PLUGIN DEPENDENCIES
For each third-party plugin:
Check whether it is:
A. Already installed through npm/package.json
or
B. Loaded directly from a CDN.
If already installed through npm:
Prefer the local npm package rather than downloading a second copy into `public/cdn`.
If loaded only from a CDN:
localize the required static files into:
public/cdn/
and update the code to use them.
Do not create duplicate copies unnecessarily.
==================================================
8. PRESERVE EXACT VERSIONS
This is extremely important.
If the current website uses:
Bootstrap 5.3.3
do NOT silently change it to:
Bootstrap 5.3.4
If it uses:
AOS 2.3.4
keep that version.
First identify the existing version and preserve it unless there is a compatibility/security reason requiring a change.
==================================================
9. REMOVE CDN DEPENDENCY
After localization, remove unnecessary third-party CDN references from the application.
The browser should NOT need to download these libraries from:
- jsdelivr
- cdnjs
- unpkg
- other third-party CDNs
The application should load them locally.
Example:
Third-party:
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css
↓
Local:
/cdn/bootstrap/bootstrap.min.css
==================================================
10. DO NOT BREAK NEXT.JS
This is a Next.js project.
Before changing anything, inspect:
- package.json
- next.config.*
- app/
- components/
- layouts
- middleware
- existing CSS
- existing JS
- public/
- current dependencies
Do not blindly convert every CDN library into a `Terms and Conditions