This is a migrated thread and some comments may be shown as answers.

Webpack support

15 Answers 336 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Daní
Top achievements
Rank 1
Daní asked on 03 May 2016, 01:45 PM
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:

15 Answers, 1 is accepted

Sort by
0
Daní
Top achievements
Rank 1
answered on 03 May 2016, 01:48 PM
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.
0
Petyo
Telerik team
answered on 05 May 2016, 07:18 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Daní
Top achievements
Rank 1
answered on 05 May 2016, 08:03 AM
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

0
Daní
Top achievements
Rank 1
answered on 05 May 2016, 08:09 AM
[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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 

[/quote]

Hi Petyo,

 

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

0
Daní
Top achievements
Rank 1
answered on 05 May 2016, 02:41 PM

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

 

0
Accepted
Petyo
Telerik team
answered on 09 May 2016, 08:02 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Daní
Top achievements
Rank 1
answered on 12 May 2016, 03:55 PM
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
0
nick
Top achievements
Rank 1
answered on 10 Apr 2018, 06:08 PM
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();

0
Plamen
Telerik team
answered on 12 Apr 2018, 10:09 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
nick
Top achievements
Rank 1
answered on 12 Apr 2018, 07:58 PM

@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.

0
Plamen
Telerik team
answered on 13 Apr 2018, 10:50 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
nick
Top achievements
Rank 1
answered on 13 Apr 2018, 12:36 PM

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({})

0
Plamen
Telerik team
answered on 17 Apr 2018, 06:25 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
nick
Top achievements
Rank 1
answered on 17 Apr 2018, 01:52 PM

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.

0
Plamen
Telerik team
answered on 18 Apr 2018, 06:03 AM
Hi,

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

Regards,
Plamen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Integration with other JS libraries
Asked by
Daní
Top achievements
Rank 1
Answers by
Daní
Top achievements
Rank 1
Petyo
Telerik team
nick
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or