Wrong order of MVC Script Bundles after debug set to false

UPDATE: After some time the bundling works fine, dont know what it was )

In my BundleConfig.cs I have these bundles defined

public static void RegisterBundles(BundleCollection bundles)  {     bundles.Add(new ScriptBundle("~/bundles/vendor").Include(         "~/Scripts/jquery-{version}.js",         "~/Scripts/bootstrap.js",         "~/Scripts/bootstrap-datetimepicker.js",         "~/Scripts/es6-shim.js",         "~/Scripts/toastr.js",         "~/Scripts/angular.js",         "~/Scripts/angular-route.js",         "~/Scripts/highcharts.src.js",         "~/Scripts/highcharts-ng.js",         "~/Scripts/angular-block-ui.js",         "~/Scripts/angular-translate.js"));      bundles.Add(new ScriptBundle("~/bundles/app").Include(         "~/Scripts/app/app.js",         "~/Scripts/app/directives.js",         "~/Scripts/app/translation.js",         "~/Scripts/app/data.service.js",         "~/Scripts/app/main.controller.js",         "~/Scripts/app/parameters.controller.js",         "~/Scripts/app/schedules.controller.js",         "~/Scripts/app/settings.controller.js",         "~/Scripts/app/subscriptions.controller.js")); } 

In my Index.cshtml file I have this sequence of adding these bundles

@Scripts.Render("~/bundles/vendor") @Scripts.Render("~/bundles/app") 

If in web.config

<compilation debug="true" targetFramework="4.5">

I have correct bundle sequence

If I change debug to false

<compilation debug="false" targetFramework="4.5">

the sequence is broken, and the app doesnt work!

Why is this happening? How to fix?

1 Answers

Answers 1

It's not typical to use more than one Scripts.Render stuck together in a page where you can merge the scripts into one bundle. Such this may be required when you work with partial/conditional scripts in specific views where we use RenderSection to meet our purpose.

Your problem comes from the reality which is bundling order is alphabetical for names with wildcards. In your case, app called before vendor.

My first solution is using one Scripts.Render if it's possible.

Second solution would be to change the place of calling second Scripts.Render, say, app scripts like using them in the bottom of page or using meta tags between them (not after the vendor to avoid ordering).

If you want to ensure that scripts are in correct order, please don't use multiple Scripts.Render. Instead, Configure the ordering for single bundle.

Read More

Browserify, minifyify, conditional compilation

TL;DR

minifyify (the Browserify plugin) makes use of uglify-js but appears to be unable to handle Conditional compilation:

• compression works
• uglifyjs alone works for conditional compilation
• minifyify provides additional compilation optimization but I have been unable to use conditional compilation with it

---

I'm using Browserify with the babelify transformer and the minifyify plugin. Here is the cmd, broken down in readable parts:

browserify src/scripts/app/index.js -o build/prod/public/assets/js/appBundle.min.js -t [ babelify --presets [ es2015 ] ] -p [ minifyify --no-map --uglify [ --compress [ --drop_console --dead_code --conditionals --unused --if_return ] --mangle --screw-ie8 --define [ DEBUG=false ] ] ]

I've gotten every setting/option to work. However, I am unable to get conditional compilation to work. Minifyify uses uglifyjs' minify method. The fact I'm passing by minifyify shouldn't really change anything.

Building directly through uglifyjs works

uglifyjs input.js --compress --dead_code --define DEBUG=false -o output.js

But then I lose the additional compressions/optimizations provided by minifyify.

I'm also open to another build process. My needs are resumed in the settings of the current process:

• CommonJS required modules
• transpiling of ES6 to ES5
• advanced minification/compression

1 Answers

Answers 1

It turns out that the culprit was, more or less, uglifyjs. The property name for global definition in the task is different between CMD and Programmatic API.

• cmd line: --define VARNAME=VALUE
• programmatic: compress: {global_defs: { varname: value } }

That being said, it also seems that minifyify or browserify isn't passing the cmd-line options properly for global definitions - we're still investigating this

programmatic solution

By using the Browserify & minifyify programmatic API, the build task works. Below is the same task as the one in OP, but it works:

"use strict"; var browserify = require("browserify"),     fs = require("fs");  browserify("src/scripts/app/index.js")     .transform("babelify", {presets: ["es2015"], plugins: ["transform-object-assign"]})     .plugin("minifyify", {map: false, uglify: {         compress: {             drop_console: true,             dead_code: true,             conditionals: true,             unused: true,             if_return: true,             global_defs: {                 DEBUG: false             }         },         mangle: true,         "screw-ie8": true     }})     .bundle()     .pipe(fs.createWriteStream("build/prod/public/assets/js/appBundle.js")); 

update in uglifyjs docs

I've proposed a modification to the current uglifyjs docs, providing an example using the programmatic API as above, so as to avoid this issue for others in the future.

Read More