部署Primeng Apollo主题时theme.css与preloading.css重复加载问题求助

问题详情 #

本地运行项目时，theme.css和preloading.css仅加载一次，页面运行完全正常；但上线部署后，这两个文件被多次重复加载，和本地表现不一致，需要解决线上环境仅加载一次这两个文件的问题。

解决建议 #

• 检查打包配置的资源引入
  打开项目的构建配置文件（比如Angular项目的angular.json、Vite项目的vite.config.js），确认styles数组里是否只全局引入了一次theme.css和preloading.css。同时排查组件内是否通过@import重复引入了这两个文件——本地开发时打包工具可能会自动去重，但线上打包逻辑可能没生效。
• 排查懒加载模块的资源引用
  如果用了懒加载模块，检查每个懒加载模块的配置或组件，有没有单独引入主题CSS。PrimeNG主题只需要全局引入一次就行，模块内重复引用会导致部署后重复加载。
• 调整静态资源缓存策略
  上线环境的CDN或服务器缓存规则可能有问题。检查是否存在资源路径不一致（比如带版本号和不带版本号的路径同时存在），或者缓存过期时间设置不合理，导致浏览器重复请求文件。
• 清理HTML模板的重复引用
  查看入口index.html文件，有没有同时通过<link>标签和打包配置重复引入这两个CSS。本地开发时可能因为热重载逻辑自动处理了重复引用，但线上打包后会保留重复的引入。
• 检查PrimeNG主题初始化逻辑
  确认项目里是否在多个地方调用了PrimeNG的主题初始化方法（比如applyTheme）。重复调用这个方法会动态重复加载主题CSS，建议只在AppComponent的初始化钩子（比如ngOnInit）里调用一次。

内容的提问来源于stack exchange，提问作者emindemirhan