Kendo for Angular是否支持@defer语法及组件懒加载？

1. Kendo for Angular对@defer语法的支持 #

完全支持Angular 16+引入的@defer语法，这也是官方推荐的懒加载Kendo组件、优化初始包体积的方案之一。

2. 懒加载Kendo组件（尤其是Grid）的可行性 #

完全可行，这是降低初始加载时间的有效手段，具体实现可参考以下方式：

• 模板层面直接用@defer包裹：
  对于Grid这类仅在特定场景渲染的组件，直接在模板中用@defer包裹，配合@import语法让Angular自动拆分出独立chunk，示例：

  @defer (on viewport) { <!-- 可按需选择触发时机：viewport/interaction/idle等 -->
    <kendo-grid [data]="gridDataSource"></kendo-grid>
  } @placeholder {
    <div class="grid-placeholder">加载中...</div>
  } @import('@progress/kendo-angular-grid')
  

• 避免全局导入组件模块：
  不要将GridModule、CardModule等加到根模块或当前页面模块的imports数组中，否则组件代码会被打包进初始包，失去懒加载效果。仅在使用组件的地方通过@defer的@import或动态导入引入即可。

针对你已尝试的Scorecards组件优化的补充 #

你用@defer包裹Scorecards并导入CardModule的思路是对的，但需要检查：是否在当前模块的imports中全局注册了CardModule？如果是，需移除该全局导入，确保CardModule的代码只被懒加载的chunk包含。

额外的包体积优化建议 #

• 始终按需导入单个组件模块：不要导入Kendo的全量模块包（如KendoAllModule），只导入实际用到的模块（如GridModule、CardModule）。
• 利用Angular CLI分析包体积：执行ng build --stats-json生成统计文件，通过webpack-bundle-analyzer查看chunk拆分情况，确认Kendo组件是否被成功拆分出初始包。
• 结合路由懒加载：如果Grid等组件属于某个独立路由页面，直接将该路由模块设置为懒加载，进一步降低初始包大小。

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