CRM Visual Studio Extensions part 1
I want to share with you the next series of articles with recommended Visual Studio extensions for Microsoft Dynamics CRM Development.
Today I want to introduce you to Mads Kristensen extension - Bundler & Minifier.
?
What's Bundle?
Bundle is a technique of combining multiple JavaScript, CSS or HTML files into a one single file.
What's Minify?
Minification is a technique to reducing a file size by removing white space and commented code and rewriting some code in a more efficient way.
Why use this extension?
The answer is: Performance!
- Reduce the number of requests to the server – instead of loading the form.js + framework.js + common.js + helper.js + thirdPartyLibrary.js + etc. you request only one bundled file.
- Load less data from the Server – the minify file can reduce the file size by 50% - 95% !! (depend on your code).
- Control the order of the loaded WebResources in the bundled file. As we know, CRM loads the WebResources asynchronously, so if you are trying to do some logic depending on other WebResources before the onload event – it can fail.
Minification
Minify any JS, CSS or HTML file by right-clicking it in Solution Explorer. That will create a [filename].min.[ext] and nest it under the original file.
Generates:
When the original file is modified, the minified file will be updated instantly.
Bundling
Select 2 or more of the same type of files in Solution Explorer to create a bundle.
Generates:
As with minify, every change in one of the files will update instantly the bundled file.
bundleconfig.json
The bundle configuration is stored in a file called bundleconfig.json which is added to the root of the project:
Every array represents a bundled file configuration.
Reqired:
- 'outputFileName': the name of the new generated file.
- 'inputFiles': the file/s that are bundled and minified in the output file
Optional:
'Minify': a set of options for the minify. Here are some examples:
- 'Enabled': enable or disable minification (true/false). By default 'true'
- 'commentMode': save or remove comments ('none'/'all'). 'none' by default.
- 'renameLocals': keep original variables, functions and properties names or not (true/false). false by default
All other definitions are here: bundleconfig.json-specs
Debugging
Minified code looks something like this:
Object.prototype.define=function(n){var t,r,u,s,i,f;if(Object.isExtensible(this)){var e=Object.keys(n),
h=e.length,o={};for(i=0;i<h;i++){if(t=e[i],r=Object.getOwnPropertyDescriptor(n,t),/^_/.test(t)&&(r.enumerable=!1,t=t.slice(1))
,/_$/.test(t)&&(r.configurable=!1,t=t.slice(0,-1)),r.hasOwnProperty("value")&&/^[0-9A-Z_]+$/.test(t)){
for(r.writable=!1,u=t.toLowerCase().split("_"),s=u.length,i=1;i<s;i++)f=u[i],u[i]=f.charAt(0).toUpperCase()+
f.slice(1);t=u.join("")}o[t]=r}Object.defineProperties(this,o)}},function(n,t){typeof define=="function"&&
define.amd?define(t):typeof module=="object"?module.exports=t():n.augment=t()}(this,function(){"use strict";
var t=function(){},i=Array.prototype.slice,n=function(n,r){var s=t.prototype=typeof n=="function"?n.prototype:n,
u=new t,f=r.apply(u,i.call(arguments,2).concat(s)),e,o;if(typeof f=="object")for(e in f)u[e]=f[e];
How can we debug it?
- Write code without errors. "Yeah right"..
- You can use '"renameLocals"= true' in the bundleconfig.json and the browser has option to pritify the code. It still looks different from the original code, because of all of the optimizations, but when you get used to it you can read it. This will also teach you how to write efficient code.
- Use source map file. If you add '"sourceMap": true' to the bundleconfig.json, it will generate a *.map file. You can upload this file to the browser and it will transform the minified file to the original file.
More Features
- Support for globing patterns
- Saving a source file triggers re-bundling automatically
- MSBuild support for CI scenarios supported
- Shows a watermark when opening a generated file
- Task Runner Explorer integration
- Command line support
- Shortcut to update all bundles in solution
- Suppress output file generation
- Convert to Gulp
Source
You can find this extension in the Visual Studio: 'tools\Extension And Updates', or download it directly from Visual Studio market place: Bundler & Minifier.
Thanks,
Ziv Ben-Or
+972545882011