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

[Ron]

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

[Ron]

Sorry, 3.5MB instead of GB of course 

[Martin]

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

[Ron]

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

});

};

});

 

 

[Martin]

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