Webpack support

16 posts, 1 answers
  1. Daní
    Daní avatar
    314 posts
    Member since:
    Feb 2008

    Posted 03 May 2016 Link to this post

    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:
  2. Daní
    Daní avatar
    314 posts
    Member since:
    Feb 2008

    Posted 03 May 2016 in reply to Daní Link to this post

    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.
  3. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 05 May 2016 Link to this post

    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!
     
  4. Daní
    Daní avatar
    314 posts
    Member since:
    Feb 2008

    Posted 05 May 2016 in reply to Petyo Link to this post

    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

  5. Daní
    Daní avatar
    314 posts
    Member since:
    Feb 2008

    Posted 05 May 2016 in reply to Petyo Link to this post

    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!
     

    Hi Petyo,

     

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

  6. Daní
    Daní avatar
    314 posts
    Member since:
    Feb 2008

    Posted 05 May 2016 in reply to Daní Link to this post

    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

     

  7. Answer
    Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 09 May 2016 Link to this post

    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!
     
  8. Daní
    Daní avatar
    314 posts
    Member since:
    Feb 2008

    Posted 12 May 2016 in reply to Petyo Link to this post

    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
  9. nick
    nick avatar
    9 posts
    Member since:
    Feb 2017

    Posted 10 Apr 2018 Link to this post

    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();

  10. Plamen
    Admin
    Plamen avatar
    2966 posts

    Posted 12 Apr 2018 Link to this post

    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.
  11. nick
    nick avatar
    9 posts
    Member since:
    Feb 2017

    Posted 12 Apr 2018 in reply to Plamen Link to this post

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

  12. Plamen
    Admin
    Plamen avatar
    2966 posts

    Posted 13 Apr 2018 Link to this post

    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.
  13. nick
    nick avatar
    9 posts
    Member since:
    Feb 2017

    Posted 13 Apr 2018 in reply to Plamen Link to this post

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

  14. Plamen
    Admin
    Plamen avatar
    2966 posts

    Posted 17 Apr 2018 Link to this post

    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.
  15. nick
    nick avatar
    9 posts
    Member since:
    Feb 2017

    Posted 17 Apr 2018 in reply to Plamen Link to this post

    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.

  16. Plamen
    Admin
    Plamen avatar
    2966 posts

    Posted 18 Apr 2018 Link to this post

    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.
Back to Top