Bundle and minify kendo-ui

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

    Posted 12 Oct 2018 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
    1694 posts

    Posted 16 Oct 2018 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 2018 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
    1694 posts

    Posted 18 Oct 2018 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.
  5. SAM
    SAM avatar
    2 posts
    Member since:
    Nov 2018

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

    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!
  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1694 posts

    Posted 18 Apr Link to this post

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