How to improve distribution performance in vue.js application that uses kendo

5 posts, 0 answers
  1. Ron
    Ron avatar
    138 posts
    Member since:
    Sep 2011

    Posted 05 Jul Link to this post

    Hi, 

    Trying to deploy our Vue application we have noticed that our Vendor chunk is very big - and a large portion of it seems to be Kendo related. Even if we split our vendor file using the code below we create a giant progress file (3.5GB) that needs to be downloaded - and when we uncomment the console.log section - it seems that kendo-ui is the largest portion of the file - and it includes a lot of components (like spreadsheet, for example) that we do not need.

     

    Do you have any suggestions how we limit the kendo components that are distributed when we do 'npm run build' - to just the ones we use? 

    --

    configureWebpack: config => {
    config.optimization = {
    splitChunks: {
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
    vendor: {
    test: /[\\/]node_modules[\\/]/,
    name (module) {
    //get the name. E.g. node_modules/packageName/not/this/part.js
    //or node_modules/packageName
    let packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

    //console.log(module.context + ' >>> ' + packageName);
    //npm package names are URL-safe, but some servers don't like @ symbols
    return `npm.${packageName.replace('@', '')}`;
    }
    }
    }
    }
    };

    --

     

    If we add a second line to break progress with:

     

    if (packageName === '@progress') {
    packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)(.*?)([\\/]|$)/)[3];
    }

     

    we see that kendo-ui is still gigantic (3.3GB) and contains stuff we do not use, for example spreadsheet, dataviz:

     

    D:\finanda\myfinanda-web\node_modules\@progress\kendo-ui\js >>> kendo-ui
    D:\finanda\myfinanda-web\node_modules\@progress\kendo-ui\js >>> kendo-ui
    D:\finanda\myfinanda-web\node_modules\@progress\kendo-ui\js >>> kendo-ui
    D:\finanda\myfinanda-web\node_modules\@progress\kendo-ui\js\spreadsheet >>> kendo-ui
    D:\finanda\myfinanda-web\node_modules\@progress\kendo-ui\js\util >>> kendo-ui
    :\finanda\myfinanda-web\node_modules\@progress\kendo-ui\js >>> kendo-ui
    D:\finanda\myfinanda-web\node_modules\@progress\kendo-ui\js\dataviz\stock >>> kendo-ui
    D:\finanda\myfinanda-web\node_modules\@progress\kendo-ui\js\dataviz\stock >>> kendo-ui
    D:\finanda\myfinanda-web\node_modules\@progress\kendo-ui\js >>> kendo-ui

  2. Ron
    Ron avatar
    138 posts
    Member since:
    Sep 2011

    Posted 06 Jul in reply to Ron Link to this post

    Sorry, 3.5MB instead of GB of course 
  3. Martin
    Admin
    Martin avatar
    13 posts

    Posted 09 Jul Link to this post

    Hello Ron,

    Thank you for contacting us. Please follow this link to our Script Optimization Article. Under the "Including Scripts for Each Component" section, you will find detailed explanation how you can include only the widgets you need for your project. I believe that this would help you to reduce the Kendo package significantly.

    Don't hesitate to contact us if you have further questions.

    Regards,
    Martin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Ron
    Ron avatar
    138 posts
    Member since:
    Sep 2011

    Posted 15 Jul in reply to Martin Link to this post

    Martin, Thanks. This helps - but I still need to figure out - how do I get the core code to load instead of the entire package - we use number formatting and other kendo related functionality.

     

    Currently, our code looks like the following:

     

    import('@progress/kendo-ui').then(
    function () {

    import('@progress/kendo-ui/js/cultures/kendo.culture.XXXX').then(function () {
    kendo.culture('XXXX');
    });

    import('@progress/kendo-theme-default/dist/all.css');

    import('@progress/kendo-listview-vue-wrapper').then(kendoObject => {
    ListViewInstaller = kendoObject.ListViewInstaller;
    Vue.use(ListViewInstaller);
    });

     

    /// etc. for each component we need.

     

    so it seems that the question is - how do we replace the following:

     

    import('@progress/kendo-ui').then(

     

    with the "core" functionality + elements

    Is it something like:

    import ('@progress/kendo-ui/js/kendo.core.js').then(function() {

    import('@progress/kendo-ui/js/cultures/kendo.culture.XXXX').then(function () {
    kendo.culture('XXXX');
    });

    import('@progress/kendo-theme-default/dist/all.css');

    import ('@progress/kendo-ui/js/kendo.listview.js).then(function() {

    import('@progress/kendo-listview-vue-wrapper').then(kendoObject => {

      ListViewInstaller = kendoObject.ListViewInstaller;
      Vue.use(ListViewInstaller);

    });

    };

    });

     

     

  5. Martin
    Admin
    Martin avatar
    13 posts

    Posted 17 Jul Link to this post

    Hello Ron,

    You could load only the module of the widgets that you are using across the application as follows:
    import './node_modules/@progress/kendo-ui/js/kendo.grid';

    Webpack will automatically resolve all of the packages on which the Grid depends upon.

    Attached you will find a project, in which I import the Grid only. In the index.html, you can see that, apart from initializing a Grid, I also have a DropDownList, which is rendered correctly. To run the project, you will need to run npm install and then npm run build in the terminal.

    Do not hesitate to contact us if you have further questions.

    Regards,
    Martin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top