PrimeFaces 12中Saga主题theme.css加载缓慢问题求助

针对Saga主题CSS文件体积大、加载慢的问题，可尝试以下几种优化手段：

• 启用PrimeFaces内置资源压缩与合并
  在项目web.xml中添加配置，开启主题CSS的压缩混淆与资源合并，直接减小文件体积并减少HTTP请求数：

  <context-param>
      <param-name>primefaces.THEME_COMPRESSION</param-name>
      <param-value>true</param-value>
  </context-param>
  <context-param>
      <param-name>primefaces.RESOURCE_COMPRESSION</param-name>
      <param-value>true</param-value>
  </context-param>
  <context-param>
      <param-name>primefaces.RESOURCE_OPTIMIZATION</param-name>
      <param-value>true</param-value>
  </context-param>
  

• 精简主题CSS，移除未使用样式
  默认Saga主题包含大量通用样式，你的项目可能仅用到其中一部分，可按以下步骤精简：

  1. 从PrimeFaces的Jar包中提取Saga主题的theme.css文件；
  2. 用PurgeCSS工具扫描项目所有JSF页面，识别实际用到的CSS选择器；
  3. 移除theme.css中未使用的样式规则，生成精简版CSS；
  4. 将精简后的CSS放入项目资源目录，配置PrimeFaces使用自定义主题：

     <context-param>
         <param-name>primefaces.THEME</param-name>
         <param-value>custom-saga</param-value>
     </context-param>
     

     需确保自定义主题的目录结构符合PrimeFaces主题规范。

• 配置浏览器长期缓存
  在服务器中设置CSS文件的缓存响应头，让浏览器缓存该文件，避免重复下载。以Tomcat为例，在web.xml中添加缓存过滤器：

  <filter>
      <filter-name>CacheFilter</filter-name>
      <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
      <init-param>
          <param-name>ExpiresByType text/css</param-name>
          <param-value>access plus 30 days</param-value>
      </init-param>
  </filter>
  <filter-mapping>
      <filter-name>CacheFilter</filter-name>
      <url-pattern>*.css</url-pattern>
  </filter-mapping>
  

• 开启HTTP/2协议
  若服务器支持（如Tomcat 9+、Jetty 9+），开启HTTP/2协议。其多路复用特性可大幅提升静态资源加载效率，缩短CSS文件的加载耗时。

• 延迟加载非核心样式（可选）
  拆分主题CSS，将首屏必需样式单独提取优先加载，剩余非关键样式在页面加载完成后异步加载：

  window.addEventListener('load', function() {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = '/resources/theme/non-critical.css';
      document.head.appendChild(link);
  });
  

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