Minify Javascript and CSS before publication

[zfi]

Update the build process to minify the JavaScript ans CSS source files. This process should remove inline comments, white space and whatever else is not needed to actually execute the script(s).

[zfi]

One possibility is to maintain a set of minified files as part of the development process. The Jetbrains tools (WebStorm and IntelliJ) support a concept of file watching. The tool that actually performs the minification is executed whenever the source file is changed (saved).

We can add the {filename}.min.js files to the repo and then Jenkins can just deploy them in lieu of the larger source files. This also allows us to update the source on the server to include the minified file names instead of the original source.

I will test this and report back.

[PropGit]

When you test this, can you determine if there's an easy was to test locally with either the full or minified sources, at-will? (Debugging is much easier with full source, testing for sane operation should also be done on minified source).

Some minificiation techniques are destructive in certain cases, like symbol shortening where dependencies are involved, so we'll probably want to stay away from those.

[zfi]

I tested with the UglifyJS package which is supported under NodeJs. The process is quite simple. You set a File Watcher in WebStorm to observe .js files. When the editor saves a .js file, the editor notifies the file watcher and that, in turn, launches UglifyJS to compress a copy of the file and names it with a '.min.js' extension to differentiate it from the source. The source file is never altered in the process. All we're doing here is removing comments, white space, including CR/LF. It is not mangling the code in any way.

As far as debugging goes, all you need to do is change up the href in the script tag to use the .js file instead of the .min.js file.

[zfi]

Further testing indicates that the UglifyJS package has no idea what to do with newer constructs, such as const or let.

Testing the next plugin, closure_compiler. The first thing that I find is the the const declaration is converted to a var. I don't think that breaks anything but it's a little unnerving that it is happening. This plugin also renamed the variables that were declared const and it also constructed a compound statement for the variable assignment of the three variables declared. This does create a slightly smaller minified file.

[zfi]

Closure_Compiler has two optimization settings, STANDARD and ADVANCED. Using the STANDARD setting, the generated code is void of comments and white space. Further, it promotes and combines code in places such as variable declarations. It does some very light - and easily trackable changes to code.

This last feature should not be an issue unless there are global variables declared in one file and referenced in another. If this does occur, it is an excellent candidate for a class wrapper.

[zfi]

Work here was suspended when it was discovered that most of the block code cannot be compressed as a group of files because of global references into the Google Blockly core.