如何减小Kendo.js文件体积 优化MVC 5站点加载性能

1. 定制裁剪构建包 #

默认分发的kendo.min.js是包含全部组件的全量包，涵盖了网格、图表、调度器、富文本编辑器等几十种组件，大多数项目实际用到的组件仅占全量包的20%~40%。你可以通过Kendo的自定义构建工具，仅勾选项目中实际使用的组件生成专属的min.js文件，这一步通常可以直接把文件体积降到1MB以内。
注意构建时必须保留核心依赖模块kendo.core，其他组件按需勾选即可，不需要的多语言包、全局化模块、主题相关的JS逻辑都可以直接裁剪。

2. 开启服务端压缩 #

MVC5通常部署在IIS服务器，默认的静态资源压缩配置可能未覆盖JS文件，你可以在web.config中添加以下配置开启gzip/Brotli压缩：

<system.webServer>
  <httpCompression>
    <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" dynamicCompressionLevel="9" />
    <staticTypes>
      <add mimeType="application/javascript" enabled="true" />
      <add mimeType="application/x-javascript" enabled="true" />
      <add mimeType="text/javascript" enabled="true" />
    </staticTypes>
  </httpCompression>
  <urlCompression doStaticCompression="true" doDynamicCompression="false" />
</system.webServer>

开启压缩后，JS文件的传输体积可以再缩小60%~70%，3.67MB的原文件压缩后实际传输大小仅为1MB左右。

3. 配置静态资源缓存 #

在web.config中给Kendo JS文件配置长缓存策略，避免用户每次访问都重新加载文件：

<staticContent>
  <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
</staticContent>

后续升级Kendo版本时，只需要在引入JS的URL后添加版本号参数（比如kendo.min.js?v=2024.1）即可触发缓存更新。

4. 按需拆分加载 #

如果站点不同页面使用的Kendo组件差异较大，可以将Kendo拆分为核心包和组件独立包，仅在对应页面引入需要的组件脚本。比如只有数据页用到表格组件，就单独拆分表格相关的JS，仅在数据页加载，其他页面无需引入。

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