Webpack support

[Daní]

I'm trying to use webpack with kendo, but the bundled file is almost 20mb, which is much bigger than the 2.7mb of kendo.all.

Webpack configuration follows the one presented in http://docs.telerik.com/kendo-ui/third-party/webpack but still, the resulting bundled file is almost 20mb. Without kendo, my application, wtihout kendo, is just over 3mb… Why the final bundled application is adding 17mb just because kendo is included since the kendo.all.min.js (pro version) is below 3mb?

I've tried to include kendo.all.min.js as an alias in webpack:


alias: {
  “kendo”: path.join(__dirname, “third-party/kendo/kendo.all.min.js”),


And then importing it in our app:

import ‘kendo’;

But then webpack is not able to resolve the dependencies of the controls (if we are using for example kendo-grid).

Importing just a control didn’t work either:

[Daní]

The only working solution is including kendo.all.min.js in the index.html file as it is presented in http://docs.telerik.com/kendo-ui/third-party/webcomponents, but this is not an option for the project.

[Petyo]

Hello,

this sounds weird. We haven't observed such behavior with webpack. May you replicate the problem in an isolated case? You may strip the Kendo UI scripts to reduce the archive size. 

Regards,
Petyo
Telerik

 

 

[Daní]

Thanks Petyo for your response,

 

The ecosystem of the application it's a bit complex. I'm using aurelia framework with webpack + polymer for basic widgets. I'd like to use some professional kendo widgets like grid or scheduler.

 

I'll try to isolate the issue in a demo project with just aurelia +webpack + kendo

[Daní]

[quote]Petyo said:Hello,

this sounds weird. We haven't observed such behavior with webpack. May you replicate the problem in an isolated case? You may strip the Kendo UI scripts to reduce the archive size. 

Regards,
Petyo
Telerik

 

 

[/quote]

Hi Petyo,

 

Whato do you mean with "You may strip the Kendo UI scripts to reduce the archive size."

[Daní]

Hi again,

this link demo points to a GitHub repo with an small example of an aurelia + webpack app with a single view that uses a kendo grid. You have to copy kendo ui *.min.js file into the folder third-party/kendo/js before running the app (please, follow the readme guide)

Using *.min.js kendo files instead of *.js we can achieved to reduce bundle size to 12MB instead of 18, anyway resulting is still to huge

 

Thansk

 

[Petyo]

Hi,

We don't provide official support for Aurelia, and I suspect that the problem may be caused by its internals. Is it possible to replicate the problem starting from the setup we provided on our documentation? 

Regards,
Petyo
Telerik

 

 

[Daní]

I finally could find the issue. It was related with babel transpiler, setting babel option "compact" to true fixed the issue and now adding kendo adds just 1Mb to the bundler

[nick]

Using Kendo-ui with Typescript + Webpack 3 and above,

 

import { Grid, GridInstaller } from "@progress/kendo-grid-vue-wrapper";

import "@progress/kendo-ui"; // yields a 3.1 mb minified bundle...without this line, the kendo.ui namespace cannot be found.


 

const gridWidget: kendo.ui.Grid = this.$refs.gridComponent.kendoWidget();

[Plamen]

Hello,

The error seems to be connected with the size of the package. You can try to reduce it by reaching just the grid files by inserting just the grid file as in the code below:
import "@progress/kendo-ui/js/kendo.grid.js";

As for the second issue yes indeed you include the kendo-ui scripts because the wrapper depends on them.

Regards,
Plamen
Progress Telerik

[nick]

@Plamen There isn't any error. The minified bundle is enormous due to the following import statement:

import "@progress/kendo-ui";

which brings in the entire kendo-ui library when building with Webpack in production mode. This is evident in the previously attached Webpack bundle analyzer "Report.html" file. Just load this file in a browser to see the visual analysis.

I think there needs to be a "kendo" module export.

[Plamen]

Hi,

Thank you for elaborating the issue.

Yes indeed when you import  "@progress/kendo-ui" it is bundling all the widgets and that is why the script is becoming quite big. In cases when you need to use just some of the widgets you can import just the file as for example with the case of "@progress/kendo-ui/js/kendo.grid.js" that will bundle only the scripts needed for the grid widget.


Regards,
Plamen
Progress Telerik

[nick]

But the problem is getting a reference to the grid widget which is dependent on importing "@progress/kendo-ui" such as

const gridWidget: kendo.ui.Grid = this.$refs.gridComponent.kendoWidget();

Or creating a kendo data source for a grid also depends on "@progress/kendo-ui" such as

let datasource = new kendo.data.DataSource({})

[Plamen]

Hello,

In the current implementation the Kendo Vue wrappers are client-side wrapper for the Kendo UI jQuery widgets are for example it is explained in the introduction article here. If you would like a native Vue controls from Kendo you can vote for the feature that is logged in our feedback portal here.

Regards,
Plamen
Progress Telerik

[nick]

This issue is not specific to Kendo Vue wrappers. However, I was able to reduce my vendor bundle size by creating a "kendo.shim.ts" file with only the following line:

import "@progress/kendo-ui";

And removing all other occurrences of the import above. The "Cannot find namespace kendo.*" errors went away.

Thanks for the quick responses.

[Plamen]

Hi,

Thank you for sharing you solution and for your concern with Kendo.

Regards,
Plamen
Progress Telerik