Angular 17生产构建main.js过大，如何拆分Kendo库？

针对你遇到的main.js打包体积过大、包含完整Kendo库的问题，可以通过以下几种方式拆分Kendo代码：

• 路由懒加载（适配独立组件，推荐）
  将使用Kendo的独立组件配置为路由懒加载，Angular会自动把该组件及依赖的Kendo模块打包到单独的chunk中，不会混入main.js。
  路由配置示例：

  const routes: Routes = [
    {
      path: 'kendo-feature',
      loadComponent: () => import('./kendo-components/kendo-feature.component').then(m => m.KendoFeatureComponent)
    }
    // 其他路由配置
  ];
  

• 配置Angular CLI的代码分割规则
  修改angular.json中的构建配置，强制将Kendo相关模块拆分到独立chunk：

  {
    "projects": {
      "your-project-name": {
        "architect": {
          "build": {
            "options": {
              "optimization": {
                "scripts": true,
                "styles": true,
                "fonts": true,
                "splitChunks": {
                  "chunks": "all",
                  "cacheGroups": {
                    "kendo": {
                      "test": /[\\/]@progress[\\/]kendo-angular-[\\/]/,
                      "name": "kendo-vendors",
                      "chunks": "all",
                      "priority": 10
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  

• 维持按需导入Kendo模块
  继续保持当前独立组件中仅导入所需Kendo模块（如ButtonModule、DropDownsModule）的做法，绝对不要全局导入整个Kendo库，这是实现有效拆分的基础前提。

验证拆分效果 #

执行生产构建后，查看dist目录下的文件，应该会生成类似kendo-vendors.[hash].js的独立chunk；也可以执行ng build --configuration production --stats-json生成统计文件，进一步分析打包结构确认拆分结果。

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