Bundle and minify kendo-ui

4 posts, 0 answers
  1. Guillermo
    Guillermo avatar
    7 posts
    Member since:
    Nov 2017

    Posted 12 Oct Link to this post

    I have installed @progress/kendo-ui with NPM and I have used WEBPACK 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 WEBPACK. Both files are too long, I think. This is my config files to get GRID and COMBOBOX bundle and its css and images:

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

    ** appJS.js

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

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

    require("@progress/kendo-ui/css/web/kendo.common.min.css");
    require("@progress/kendo-ui/css/web/kendo.default.min.css");
    require("@progress/kendo-ui/css/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 ????

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1599 posts

    Posted 16 Oct Link to this post

    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.
  3. Guillermo
    Guillermo avatar
    7 posts
    Member since:
    Nov 2017

    Posted 16 Oct in reply to Ivan Danchev Link to this post

    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-webpack-plugin and nothing. Also, I tried to put only the grid js to see if that work but again, nothing.

    appJS

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

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

    webpack.config.js

    var path = require('path');
    var UglifyJsPlugin = require('uglifyjs-webpack-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$/
            })]
        }
    };

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1599 posts

    Posted 18 Oct Link to this post

    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.
Back to Top