Question

在分析了我庞大的20MB webpack包之后，我发现Kendo UI（v 2016.3.1028）占用了大约10 MB：

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 ..注册Kendo指令：

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';

...

我提供的详细信息配置是否不正确？是否需要更多信息？

Answer 1

如果你不需要，你不需要包含完整的剑道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

Webpack加载整个库（Kendo UI）而不是单个组件？

1 个答案: