Script Size Optimization

To reduce the size of your Vue application, Kendo UI for Vue enables you to load only parts of the entire Kendo UI library.

Each Kendo UI component for Vue requires a specific set of the Kendo UI source scripts. Organized in this way, the modular structure of Kendo UI allows you to load only those scripts that are needed in a specific application scenario.

To load only the Kendo UI scripts you need, use Webpack and utilize either of the following approaches:

Including the Scripts for Each Component

Including the individual script files for each component directly from the source folder of the @progress/kendo-ui package is a viable approach when you use a limited number of components in your application. This approach may dramatically reduce the size of the referenced JavaScript files from Kendo UI.

To include the scripts for each component:

  1. Identify which are the scripts that will be included. The full list of scripts for each the Kendo UI widget is available in the Kendo UI documentation. For example, if to use only the DatePicker, go to the Editors scripts article and look for the DatePicker script in the table.

  2. Import the DatePicker script instead of the full Kendo UI library script. Webpack will also load all the dependency scripts.

    import $ from 'jquery';
    import '@progress/kendo-ui/js/kendo.datepicker.js'
  3. Import the DatePicker component and its installer from the kendo-dateinputs-vue-wrapper package.

    import { DatePicker, DateinputsInstaller } from '@progress/kendo-dateinputs-vue-wrapper'
  4. Initialize the DatePicker.

    <div id="vueapp" class="vue-app row example-wrapper">
       <kendo-datepicker v-model="date"></kendo-datepicker>
    </div>
    Vue.use(DateinputsInstaller);
    
    new Vue({
       el: '#vueapp',
       data: {
           date: null
       }
    })

Including Custom Scripts Bundles

Due to the different module loading, building a custom bundle may result in future side effects. Although including custom scripts bundles is still an option for adding Kendo UI scripts, the recommended and appropriate way to import them is by using the @progress/kendo-ui NPM module.

Including a custom scripts bundle is a viable approach only in scenarios when you use many Kendo UI widgets in your application.

To create a single bundled script:

  1. Download the Kendo UI commercial-source archive from your Telerik account.
  2. Extract the archive and navigate to its src folder.
  3. To build a custom distribution from the shipped source, run the following shell commands.

    cd src
    npm install -g gulp
    npm install
    gulp custom -c autocomplete,dropdownlist

    In the gulp command, list the components you want to be included in the custom build and separate them with a comma (,). The previous example builds a custom minified script which includes the AutoComplete and the DropDownList widgets.

    When complete, the Gulp command outputs a kendo.custom.min.js file in the src/dist directory. The Gulp build task automatically resolves the dependencies needed by each component and you do not have to list them. Avoid using multiple combined custom scripts as they will contain duplicate code. Instead, create a single combined script file which includes everything you need.

  4. Import the above script in your application.

    import $ from 'jquery';
    import 'kendo.custom.min.js'
  5. Import the respective Kendo UI components for Vue from kendo-vue-dropdowns-package.

    import { DropDownList, AutoComplete, DropdownsInstaller } from '@progress/kendo-dropdowns-vue-wrapper'
  6. Initialize the DropDownList and the AutoComplete.

    <div id="vueapp" class="vue-app row example-wrapper">
       <div>
           <kendo-autocomplete :data-source="dataSourceArray"
                               :placeholder="'Your favorite sport'"
                               :separator="', '"
                               :filter="'contains'">
           </kendo-autocomplete>
       </div>
       <div>
           <kendo-dropdownlist :data-source="dataSourceArray"
                               :index="0">
           </kendo-dropdownlist>
       </div>
    </div>
    Vue.use(DropdownsInstaller);
    
    new Vue({
       el: '#vueapp',
       data: function() {
           return {
               dataSourceArray: [
                   'Football',
                   'Tennis',
                   'Basketball',
                   'Baseball',
                   'Cricket',
                   'Field Hockey',
                   'Volleyball'
               ]
           }
       }
    })

In this article