Bundle and minify kendo-ui

[Guillermo]

I have installed @progress/kendo- with NPM and I have used to bundle the files I need to use a GRID and a COMBOBOX but so far I can't to minify the files that I get from . Both files are too long, I think. This is my config files to get GRID and COMBOBOX bundle and its and images:

------------------------------------------------------------------------------------------------

** appJS.js

$ = require('jquery');
require("@progress/kendo-/js/kendo.grid.js");
require("@progress/kendo-/js/kendo.combobox.js");

------------------------------------------------------------------------------------------------
** appCSS.js

require("@progress/kendo-//web/kendo.common.min.css");
require("@progress/kendo-//web/kendo.default.min.css");
require("@progress/kendo-//web/kendo.default.mobile.min.css");

------------------------------------------------------------------------------------------------

** webpack.config.js

var path = require('path');
var UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    entry: {
        main: './Scripts/appJS',
        css: './Scripts/appCSS'
    },

    output: {
        publicPath: "/js/",
        path: path.join(__dirname, '/wwwroot/js/'),
        filename: '[name].kendo.builds.js'
    },

    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true
            })
        ]
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' }
                ]
            },
            {
                test: /\.(svg|gif|png|eot|woff|ttf)$/,
                use: [
                    { loader: 'url-loader' }
                ]
            }
        ]
    }
};

------------------------------------------------------------------------------------------------

With this configuration I get two files, main.kendo.builds.js and css.kendo.builds.js. The main are 998 KB and the css are 8954 KB.

What should I do to get them in minified format ????

[Ivan Danchev]

Hello Guillermo,

Minified Kendo UI js files are not available through NPM, so you could consider minifying the kendo.grid.js and kendo.combobox.js files through webpack itself. See the following post on stackoverflow, which contains more details on configuring webpack to minify files.

With regard to the Kendo UI CSS files they are available in their minified variant, e.g., kendo.common.min.css


Regards,
Ivan Danchev
Progress Telerik

[Guillermo]

I tried that post before and nothing. Results were the same, 985 KB in final size. I don't know what I'm doing wrong but even I tried to use babel-minify--plugin and nothing. Also, I tried to put only the grid js to see if that work but again, nothing.

$ = require('jquery');
require("@progress/kendo-/js/kendo.grid.js");

------------------------------------------------------------------------------------------------------

webpack.config.js

var path = require('path');
var UglifyJsPlugin = require('--plugin');

module.exports = {
    entry: {
        main: './Scripts/appJS'
    },

    output: {
        publicPath: "/js/",
        path: path.join(__dirname, '/wwwroot/js/'),
        filename: '[name].kendo.builds.js'
    },

    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            include: /\.js$/
        })]
    }
};

[Ivan Danchev]

Hello Guillermo,

We are not experts in webpack configuration and minification plugins, so we would suggest asking on stackoverflow for help with regard to issues with them.

Regards,
Ivan Danchev
Progress Telerik

[SAM]

What kind of support team is this? A client is paying to use your products and having difficulties to bundle your products in webpack and you suggested the client to go to a different page because you are not an expert. I am speechless!

[Ivan Danchev]

Hello Sam,

The client was having an issue with minifying the Kendo UI js files with Webpack. The Kendo UI files are in an AMD-compatible format, so with regard to minifying them the same approach applies as with any other AMD-compatible files. The plugin to use for that is a matter of preference and the respective configuration of webpack to use the plugin and minify the js files is a matter that is not related to Kendo UI functionality or features.

As for using Kendo UI with Webpack we have an article that demonstrates how to bundle Kendo UI files with Webpack and the basic configuration needed in order to achieve that. How to use minification plugins in Webpack and the proper configuration of that third party software in such scenarios falls outside the scope of our Support Service.

The Scope of the Support Service covers built-in features and usage of the components API. We do offer assistance and guidance with regard to integrating Kendo UI with third party products, but this is in the scope of our Professional Services. For more details on the difference between the Support Service scope and that of Professional Services consult this page (more specifically the What is included and What is not included sections).

Regards,
Ivan Danchev
Progress Telerik