Liferay 7.2 React Portlet加载缓慢问题排查与优化咨询

问题背景 #

我基于Liferay 7.2开发React Portlet时遇到以下性能问题：

• Blade生成的基础React示例渲染速度快，但集成25个自定义JS文件后，Portlet加载时间飙升至14-15秒，即便依赖已缓存，首次加载和页面重载时延迟依旧明显。
• 每新增一个npm包，加载时间会额外增加2-3秒。
• 同款React代码在Liferay外运行高效，确认问题仅存在于Liferay环境中。

环境信息 #

• Liferay: 7.2
• React: 17.0.2

潜在原因分析 #

1. AMD模块适配开销：Liferay默认采用AMD规范加载模块，而React项目常用ES模块/CommonJS，编译后的代码在适配AMD时会产生额外的依赖解析、模块遍历开销，文件和依赖越多，开销越显著。
2. 未优化的打包策略：基础示例的打包配置仅满足最小需求，自定义代码和新增依赖未做Tree Shaking、代码分割，导致bundle体积过大，Liferay处理大文件时耗时剧增。
3. Liferay资源处理流程：Liferay会对Portlet资源做校验、版本管理、缓存逻辑处理，当bundle体积过大时，这些流程的额外耗时会被放大，即便资源已缓存，也可能因资源定位逻辑产生延迟。
4. 依赖重复加载：部分npm包可能与Liferay自带的库（如特定版本的React、lodash）重复，导致冗余加载，增加总加载时间。

优化建议 #

1. 优化打包配置（核心优化点） #

• 开启Tree Shaking：确保webpack.config.js中设置mode: 'production'，同时在package.json中添加"sideEffects": false（或明确标记有副作用的文件），自动移除未使用的代码。
• 实现代码分割：用React的React.lazy()和Suspense拆分大型组件或路由，实现按需加载，减少初始bundle体积：

  const DataDashboard = React.lazy(() => import('./components/DataDashboard'));
  
  function PortletRoot() {
    return (
      <React.Suspense fallback={<div>加载中...</div>}>
        <DataDashboard />
      </React.Suspense>
    );
  }
  

• 压缩合并资源：使用TerserPlugin压缩JS代码，CssMinimizerPlugin压缩CSS，同时合并零散小文件为少量bundle，减少HTTP请求次数。

2. 适配Liferay AMD加载机制 #

• 减少冗余AMD包装：如果使用liferay-npm-bundler，在.npmbundlerrc中设置"wrapModules": false（针对无需适配Liferay全局模块的代码），避免不必要的AMD包装开销。
• 复用Liferay共享依赖：检查Liferay自带的依赖版本，若与项目兼容，将其标记为peerDependencies，避免重复打包：

  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
  

3. 优化资源缓存策略 #

• 配置Portlet缓存：在liferay-portlet.xml中开启缓存并设置过期时间，减少Liferay资源校验开销：

  <portlet>
    <portlet-name>your-react-portlet</portlet-name>
    <cacheable>true</cacheable>
    <expiration-cache>31536000</expiration-cache> <!-- 1年 -->
  </portlet>
  

• 配置HTTP缓存头：确保Liferay服务器返回正确的Cache-Control、ETag响应头，让浏览器有效缓存资源。

4. 精简依赖 #

• 分析依赖体积：用webpack-bundle-analyzer生成bundle体积分析报告，定位体积过大的依赖，替换为轻量替代（如用date-fns替代moment.js），移除未使用的依赖。
• 去重依赖版本：执行npm dedupe清理重复的依赖版本，减少打包后的代码冗余。

5. 调试与环境优化 #

• 排查加载瓶颈：用浏览器DevTools的Network面板分析每个资源的加载时间、大小，定位耗时最长的资源；也可使用Liferay自带的Control Panel > Configuration > Server Administration > Performance工具监控资源加载情况。
• 切换生产模式：确保Liferay运行在生产模式下（在portal-ext.properties中添加include-and-override=portal-production.properties），关闭开发模式下的额外日志、校验开销。

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