Webpack only certain controls

[Doug]

Hello.

I pulled Kendo down from npm however webpacking kendo.all.js results in a 3MB file so I would prefer to only pack the controls that my application is going to utilize. I found this link which shows all of the script dependencies so, the chart for example, I assume I could pack that up like:

const path = require('path');

module.exports = {
    entry: './node_modules/@progress/kendo-ui/js/kendo.dataviz.chart.js',
    output: {
        filename: 'kendo.js',
        path: path.resolve(__dirname, 'wwwroot/js')
    }
};

 

but what is the preferred approach to bundling multiple controls?

[Dimitar]

Hello Doug,

With NPM you need to download the entire Kendo UI package. However, you can still specify which modules to be imported in your built scripts via WebPack. 

The most simple solution is to just import the kendo file you need for the current app by specifying the correct path. For example, for the grid you need to import @progress/kendo-ui/js/kendo.grid. For example, with Webpack you could specify a kendo alias:

alias: {
  'kendo': '@progress/kendo-ui/js/'
},

And import the needed modules as follows: 

import 'kendo/kendo.grid'

Regards,
Dimitar
Progress Telerik

[Doug]

Hi, Dimitar.

 

Thanks for that however I am not using React, Angular, or any other framework that allows me to use import 'file name' in my scripts. I am working with a front end that is using vanilla javascript (similar to the HTML5/JavaScript examples in the demos). I can separate the controls into their own bundles via WebPack like so

const path = require('path');

module.exports = {
    entry: {
        grid: './node_modules/@progress/kendo-ui/js/kendo.grid.js',
        chart: './node_modules/@progress/kendo-ui/js/dataviz/chart/kendo-chart.js',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'wwwroot/js')
    }
};

 

The issue with doing this is that the controls (at least the ones I have looked at) require kendo.core which itself requires jQuery which means when I break my bundles out like I have shown above, each bundle has jQuery. The chart bundle is about 500KB and the Grid bundle is about 1MB. 

My primary problem is that I don't want to download all of the JavaScripts / CSS files which then need to be committed to source control, this is why I am pulling the scripts from NPM. Now, I know that I can pull down working scripts from the NuGet repo (which I can then copy accordingly) however in a .NET Core application this requires me to override the global packages folder so that the files download into my project folder.  Additionally, while I am aware that I can download the packages for .NET Core that abstract much of the JavaScript, I am trying to work with these controls directly via JavaScript so the .NET Core / ASP.NET MVC packages are not a solution for me. 

[Dimitar]

Hi Doug,

Instead of using multiple entry points (which creates multiple scopes), use a single entry point to bundle the scripts as shown in the following section of the documentation:

• Build AMD-Formatted Scripts.

Instead of using import, you can use the require() method to load the scripts. Additional information on the topic is available in the WebPack Documentation.

Regards,
Dimitar
Progress Telerik