LWR Experience Builder站点LWC动态渲染为何仅在调试模式下生效？

问题描述 #

我正在基于Experience Builder的LWR社区站点，用LWC构建支持用户自定义配置的仪表盘。原本动态渲染仪表盘的逻辑符合预期，但测试时发现一个问题：只有开启用户级的调试模式（允许调试Lightning组件JavaScript代码的设置），才能看到渲染后的组件，仅开关该设置就能复现此问题。

我通过以下方式定义动态导入的组件映射（理论上可被静态分析）：

const COMPONENT_MAP = {
  Widget1: () => import("c/widget1"),
  Widget2: () => import("c/widget2"),
  Widget3: () => import("c/widget3"),
  Widget4: () => import("c/widget4")
};

随后使用包含用户所需组件的配置对象，通过<lwc:component>动态渲染每个组件：

<template for:each={componentConstructors.sectionA} for:item="component">
  <lwc:component lwc:is={component.ctor} key={component.id}></lwc:component>
</template>

开启调试模式时功能正常，但关闭后组件直接消失，无任何错误提示。请问问题出在哪里？

问题原因与解决方案 #

这个问题的核心是LWR在非调试模式（生产优化模式）下的代码摇树优化机制：当关闭调试模式时，LWR会自动移除它认为未被引用的代码组件，而你的动态导入组件没有被LWR的静态分析工具识别为“被使用”，所以被排除在生产构建包之外，导致运行时无法加载组件，自然渲染不出来。

具体解决方法 #

1. 配置lwc.config.json声明动态导入组件

在项目根目录的lwc.config.json中，明确添加动态导入的组件列表，告诉LWR这些组件需要被打包进生产构建：

{
  "modules": [
    {
      "dir": "force-app/main/default/lwc",
      "dynamicImports": ["c/widget1", "c/widget2", "c/widget3", "c/widget4"]
    }
  ]
}

2. 用jsconfig.json强制包含组件

如果你的组件有独立的配置文件，可以在组件所在目录的jsconfig.json中添加include字段，确保这些组件被纳入构建范围：

{
  "compilerOptions": {
    "target": "es2020"
  },
  "include": [
    "**/widget1/**/*",
    "**/widget2/**/*",
    "**/widget3/**/*",
    "**/widget4/**/*"
  ]
}

3. 额外排查验证点

• 检查浏览器控制台的错误日志：关闭调试模式后，有些错误不会主动弹出，但可以在控制台的「Errors」标签页找到组件加载失败的具体信息（比如404找不到组件资源）
• 确认组件路径大小写完全正确：LWC对组件名称的大小写敏感，动态导入的路径必须和组件实际目录名称完全匹配
• 验证组件API版本兼容性：确保所有widget组件的apiVersion与LWR社区站点使用的API版本一致，避免因版本不兼容导致加载失败

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