feat: conditionally inject Cloudflare Analytics script

- Updated index.html to include a placeholder for Cloudflare Web Analytics, which is now only injected in production mode.
- Modified vite.config.ts to implement an HTML transform plugin that dynamically adds the Cloudflare script based on the environment.
This commit is contained in:
typist
2025-10-30 09:43:50 +08:00
parent 0d6334592d
commit 970d1ac3ed
2 changed files with 14 additions and 4 deletions

View File

@@ -65,8 +65,8 @@
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<!-- Cloudflare Web Analytics -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "2aecdc025eb043bc89ce931b54a80054"}'></script>
<!-- Cloudflare Web Analytics - Only in Production -->
<!--CLOUDFLARE_ANALYTICS_PLACEHOLDER-->
<!-- End Cloudflare Web Analytics -->
</body>
</html>

View File

@@ -5,10 +5,20 @@ import tailwindcss from "@tailwindcss/vite"
import { VitePWA } from 'vite-plugin-pwa'
// https://vite.dev/config/
export default defineConfig({
export default defineConfig(({ mode }) => ({
plugins: [
react(),
tailwindcss(),
// HTML 替换插件 - 仅在生产环境注入 Cloudflare Analytics
{
name: 'html-transform',
transformIndexHtml(html) {
const cloudflareScript = mode === 'production'
? `<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "2aecdc025eb043bc89ce931b54a80054"}'></script>`
: '';
return html.replace('<!--CLOUDFLARE_ANALYTICS_PLACEHOLDER-->', cloudflareScript);
}
},
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['lite.svg', 'robots.txt', 'sitemap.xml'],
@@ -130,4 +140,4 @@ export default defineConfig({
},
chunkSizeWarningLimit: 500,
},
})
}))