Codex项目中HTML的<head>常因重复引入CSS导致性能下降和FOUC：需通过搜索HTML、Network面板定位重复项，手动保留首个<link>或统一收口至all.css；JS动态插入须加querySelector去重；第三方库应禁用自动注入；构建工具可用dedupe插件拦截重复import。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
当你在 Codex 项目中反复生成前端代码时，常会发现 HTML 的 <head> 里堆叠了多个重复的 CSS 引入，比如 <link rel="stylesheet" href="styles.css"> 出现三次，或同一文件被 @import 和 <link> 同时加载——这不仅拖慢页面，还可能引发样式优先级混乱和 FOUC。
确认哪些样式文件被重复引入
打开项目中所有 HTML 文件（含模板如 index.html、base.html、_layout.html），用 Ctrl+F 搜索 <link 和 @import 关键字，逐行记录每个 href 或字符串路径。特别注意相对路径是否实际指向同一物理文件：例如 ./css/styles.css、css/styles.css、/static/css/styles.css 在构建后可能全解析为同一文件。
打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 按 “Initiator” 列排序，观察哪些 CSS 文件被多个 JS 或 HTML 节点触发加载。若某 CSS 文件的 Initiator 显示多个不同源（如 index.html:12 和 main.js:88），说明存在跨层重复引入。
手动清理 HTML 中的重复 <link> 标签
方法一：按加载顺序保留首个，删后续所有同路径项
在 <head> 区域内，从上到下扫描所有 <link rel="stylesheet">，对每个 href 值做首次出现标记；第二次及以后出现时，直接删除整行标签。这能确保样式加载顺序不被破坏，因为 CSS 层叠依赖声明位置。
方法二：统一收口到一个入口文件
新建 src/css/all.css，用 @import 汇总所有必需样式：
@import url("./base.css");<br>@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css");然后只在 HTML 中保留唯一一行：
<link rel="stylesheet" href="css/all.css">。【务必删除原分散在各处的所有其他 <link>，否则反而叠加】
通过 Codex CLI 生成图片，支持尺寸控制和批量模式。依赖：codex (npm)。代理默认启用。用 generate.sh 生成单张，batch_generate.sh 批量生成游戏 UI 素材，gen_size.sh 指定尺寸。所有输出保存至 ~/.codex/generated_images/。
清除 JS 动态插入的重复样式
第一步：定位动态注入逻辑
全局搜索关键词 insertAdjacentHTML、appendChild、document.createElement("link")、loadCSS(，尤其关注组件初始化、主题切换、插件加载等函数内部。
第二步：加去重判断再插入
将类似以下原始代码：
const link = document.createElement("link");<br>link.href = "/css/theme-dark.css";<br>document.head.appendChild(link);改为：
if (!document.querySelector('link[href="/css/theme-dark.css"]')) {<br> const link = document.createElement("link");<br> link.href = "/css/theme-dark.css";<br> document.head.appendChild(link);<br>}
第三步：检查第三方 SDK 自动注入行为
某些 UI 库（如某些旧版 Ant Design、Element UI 按需加载插件）会在运行时自动插入 CSS。查阅其文档，启用 css: false 或 style: false 配置项，改由你手动统一管理。
用 Webpack/Vite 插件自动拦截重复 import
如果你使用构建工具，可立即生效：
① Vite 项目：在 vite.config.ts 中添加 optimizeDeps.exclude 并配合 build.rollupOptions.plugins 引入 rollup-plugin-dedupe，配置 {include: ["**/*.css"], dedupe: ["bootstrap", "normalize.css"]}；
② Webpack 项目：安装 webpack-plugin-dedupe，在 plugins: [] 中加入 new DedupePlugin({ test: /\.css$/ })。【该插件仅处理构建时 import，不影响 HTML 中手写的 <link>，二者需同步清理】
