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

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

4 Answers 63 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Veteran
Ron asked on 05 Jul 2019, 02:14 PM

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

4 Answers, 1 is accepted

Sort by
0
Ron
Top achievements
Rank 1
Veteran
answered on 06 Jul 2019, 08:26 PM
Sorry, 3.5MB instead of GB of course 
0
Martin
Telerik team
answered on 09 Jul 2019, 01:36 PM
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.
0
Ron
Top achievements
Rank 1
Veteran
answered on 15 Jul 2019, 05:22 PM

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

});

};

});

 

 

0
Martin
Telerik team
answered on 17 Jul 2019, 02:00 PM
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.
Tags
General Discussions
Asked by
Ron
Top achievements
Rank 1
Veteran
Answers by
Ron
Top achievements
Rank 1
Veteran
Martin
Telerik team
Share this question
or