This is more or less directly taken from a note I dropped to my team after investigating some weird behaviour which was occurring only in the minified version of our code. Now I do need to point out that in many cases, the issue with minified code will more or less identify itself if you’re using AngularJS and have not written minification-proof code. But, but…if you’re going in blind, or are simply not sure what is wrong, hopefully this technique will help.
When faced with minified code which misbehaves, you may attribute it to one (or both) of the following stages:
- Concatenation: This is where RequireJS will trace dependencies and put everything in one single file, in the correct order. Any file may be excluded from this concatenation by using the excludeShallow option. The relevant link is here.
- Obfuscation: This is when whitespace is stripped, names are shortened, and statements are mangled while maintaining syntactic and semantic correctness. This is a global option and can be turned off by setting optimize to none. RequireJS uses the UglifyJS library by default. This implies that if you use the excludeShallow option for all files, and set optimize to none, your resulting minified source will be the same as your original, unminified, source.
Steps to debug
- Use excludeShallow for all files, and set optimize to none, initially.
- Minify your source and check to see if it is causing any problems.
- If not, start removing excludeShallow from files, until you can reproduce the issue.
- Narrow it down to the file/files which are responsible for this misbehaviour. Fix the issue, or exclude it from the minification step.
- Turn optimize back on (set it to uglify), and verify that nothing else is broken.