Webpack加载整个库(Kendo UI)而不是单个组件

Webpack loading entire library (Kendo UI) rather than individual components?

本文关键字：组件 单个 UI Kendo 加载 Webpack      更新时间：2023-09-26

在分析了我庞大的20MB webpack bundle后，我发现Kendo UI (v 2016.3.1028)占用了约10mb:

C:'Projects'webpack-angular-es6-master>webpack --json | webpack-bundle-size-analyzer
kendo: 9.92 MB (62.7%)
font-awesome: 1.27 MB (8.04%)
angular: 1.13 MB (7.15%)
angular-material: 1.08 MB (6.82%)
jquery: 251.51 KB (1.55%)
angular-ui-router: 165.89 KB (1.02%)
angular-animate: 147.1 KB (0.908%)
toastr: 29.11 KB (0.180%)
angular-sanitize: 26.26 KB (0.162%)
angular-aria: 14.87 KB (0.0918%)
style-loader: 6.99 KB (0.0431%)
css-loader: 1.47 KB (0.00907%)
webpack: 84 B (0.000506%)
<self>: 1.79 MB (11.3%)

我已经创建了一个Gist来展示我的webpack配置、index.js (Angular入口点)和controller.js。

我认为关键的摘录是:

index.js . .注册剑道指令:

import 'kendo.core';
import 'kendo.angular';
...
angular.module('app', [uirouter, sanitize, home, post, 
                      comment, user, adverseEvent, 
                      product, 'ngMaterial', 'kendo.directives'])
...

和controller.js . .导入Kendo网格模块，以便它可以在相关页面上作为<kendo-grid></kendo-grid>:

使用
import 'kendo.grid';
...

从提供的详细信息来看，我的配置是否错误?还需要更多的信息吗?

如果你不需要，你不需要包含完整的kendo JS(kendo.all.min. JS)

你可以自由地只包含你使用的组件的单独JS(即:kendo.grid.min.js AND kendo.dropdownlist.min.js等).

或者，您可以生成一个自定义的JS文件，其中包含您使用的所有组件。

见http://docs.telerik.com/kendo-ui/intro/installation/what-you-need

您可能也会感兴趣:http://docs.telerik.com/kendo-ui/third-party/webpack

相关文章：