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

Bundle and minify kendo-ui

5 Answers 243 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Guillermo
Top achievements
Rank 1
Guillermo asked on 12 Oct 2018, 02:33 PM

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 ????

5 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 16 Oct 2018, 11:27 AM
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
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
Guillermo
Top achievements
Rank 1
answered on 16 Oct 2018, 01:15 PM

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$/
        })]
    }
};

0
Ivan Danchev
Telerik team
answered on 18 Oct 2018, 07:34 AM
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
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
SAM
Top achievements
Rank 1
answered on 16 Apr 2019, 05:48 PM
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!
0
Ivan Danchev
Telerik team
answered on 18 Apr 2019, 12:07 PM
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
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
Guillermo
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Guillermo
Top achievements
Rank 1
SAM
Top achievements
Rank 1
Share this question
or