-
Notifications
You must be signed in to change notification settings - Fork 21
bundling KendoUI
Note: this document is a copy of the matching KendoUI Aurelia document. It needs to be updated to describe related Syncfusion EJ document
The Aurelia-KendoUI-bridge is designed to offer you - as end-user - flexibility. The wrappers include only the Kendo files they need for that particular control to work. These files exist (in minified state) in the js folder of KendoUI distribution.
If you're reading this, then you may be wondering how to bundle these files. There are currently three options for you to consider, so let's explain a few things first.
There are two kinds of scripts in the js folder : individual and combined scripts. An individual script is a file such as kendo.button.min.js, containing only one "feature" (button in this case). Combined scripts contain multiple "individual" scripts.
Combined scripts are:
- kendo.ui.core.min.js (only in the CORE version of KendoUI)
- kendo.all.min.js
- kendo.web.min.js
- kendo.dataviz.min.js
- kendo.mobile.min.js
The Aurelia-KendoUI plugin does not use the combined scripts declared above, only the individual files such as kendo.button.min.js. Thay way, if you only use the button, you would only have to load kendo.button.min.js instead of the 2MB kendo.all.min.js.
How bundling works
The way bundling works by JSPM, is that it automatically detects any dependencies between your files. A more concrete example is that our plugin imports files in the js folder of Kendo. The bundler sees this as a dependency and includes these files in the bundle. However, this is not always what you want. There is a way to tell the bundler not to bundle these dependencies automatically, and that is by putting brackets ([ ]) around the import.
If your app bundle configuration looks like this:
"src/app-build": {
"includes": [
"*.js",
"aurelia-kendoui-bridge",
"aurelia-kendoui-bridge/**/*",
"aurelia-kendoui-bridge/**/*.html!text",
]
},
then you can change it to this:
"src/app-build": {
"includes": [
"[*.js]",
"[aurelia-kendoui-bridge]",
"[aurelia-kendoui-bridge/**/*]",
"aurelia-kendoui-bridge/**/*.html!text",
]
},
If you bundle now, you will notice that Kendo is not included in your app's bundle, and you can create a seperate bundle just for the Kendo controls.
Now that you know this, you can choose one of the following options.
This is definitely the easiest option. Instead of bundling the files together, you deploy the entire js folder. Only the controls you configure in the main.js file of your application will be loaded, in multiple requests.
To prevent the JSPM bundler from bundling any Kendo files, you can change your includes of your bundle configuration to use brackets, telling JSPM not to bundle dependencies automatically.
"src/app-build": {
"includes": [
"[*.js]",
"[aurelia-kendoui-bridge]",
"[aurelia-kendoui-bridge/**/*]",
"aurelia-kendoui-bridge/**/*.html!text",
]
},
If you want to bundle Kendo, we recommend you to create a seperate bundle. You will want to bundle the minified files in the js folder.
"dist/kendo-bundle": {
"includes": [
"kendo-ui",
"kendo-ui/**/*.js"
],
"excludes": [
"kendo-ui/js/angular.min.js",
"kendo-ui/js/jquery.min.js",
"kendo-ui/js/kendo.angular.min.js",
"kendo-ui/js/kendo.angular2.min.js",
"kendo-ui/js/kendo.ui.core.min.js"
]
}
Note: We have excluded some files from the bundle, because it's unlikely that these files will be used. We also exclude the combined file kendo.ui.core.min.js, because we are creating our own bundle from all the individual files.
Kendo PRO is quite difficult to get bundled. For example, the bundler chokes when you try to bundle (and minify) all files, without any exclusions, because it chokes on bundling kendo.spreadsheet.min.js. It works fine without minification, but without minification you'll end up with a file of ~7MB, which is not acceptable.
A working configuration looks like this:
"src/kendo-build": {
"includes": ["kendo-ui/js/*.min.js"],
"excludes": [
"kendo-ui/js/angular.min.js",
"kendo-ui/js/jquery.min.js",
"kendo-ui/js/kendo.angular.min.js",
"kendo-ui/js/kendo.angular2.min.js",
"kendo-ui/js/kendo.spreadsheet.min.js",
"kendo-ui/js/kendo.all.min.js",
"kendo-ui/js/kendo.web.min.js",
"kendo-ui/js/kendo.dataviz.min.js",
"kendo-ui/js/kendo.dataviz.mobile.min.js",
"kendo-ui/js/kendo.mobile.min.js"
],
"options": {
"inject": true,
"minify": true,
"rev": true
}
}
Note: we exclude a couple of files. Some are combined files, some are unnecessary, and we also exclude the spreadsheet because it gets the bundler stuck.
In your config.js, you can map Kendo files to kendo.all.min.js. If you do this, then you can just deploy kendo.all.min.js to your server, instead of bundling all individual files first.
"github:aurelia-ui-toolkits/aurelia-kendoui-bridge@master": {
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-framework": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"kendo-ui/js/kendo.button.min.js": "kendo-ui/js/kendo.all.min.js",
"jquery": "github:components/[email protected]"
},
Note: The important part here is "kendo-ui/js/kendo.button.min.js": "kendo-ui/js/kendo.all.min.js",
You will need to map every file in the Kendo js directory to the kendo.all.min.js file. We have seen that this is possible, but do not recommend you use this, as it is very verbose. If you know a better way to do this mapping, please contact us and we will update the documentation, so that others can use this information.