I want to use a CDN to reference jQuery for my ASP.Net MVC app.
I do not want to tie the app to a specific version of jQuery.
So, why does every example I can find, seem to reference a specific jQuery version in the CDN path but then use the version agnostic syntax in the '.Include' for the ScriptBundle?
For example:
var cdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
bundles.Add(new ScriptBundle("~/bundles/jquery", cdnPath)
.Include( "~/Scripts/jquery-{version}.js"));
Why does the CDN path not simply point to a directory in which multiple jQuery versions may reside and then the CDN server return the latest jQuery version (just as my MVC app would do when fetching scripts from bundles locally).
Or if that is not possible, then why bother with the version agnostic syntax within the .Include() method?
Some major versions of Jquery are not backward compatible. For example jQuery v2 doesn't run on IE 6/7/8. So if your project has to run on those you will have to stick with version 1
EDIT
Include() is for local scripts not the ones in CDN. In case that CDN script could not be fetched for what ever reason, local script is used instead.
Related
I am getting a jQuery is not defined error from jQuery validate being loaded before jquery.
I am not sure if this is involved with using ASP.net Boilerplate or not, though in the bundle config I have the following:
bundles.Add(
new ScriptBundle("~/Bundles/vendor/js/bottom")
.Include(
"~/lib/json2/json2.js",
"~/lib/jquery/dist/jquery.min.js",
"~/lib/bootstrap/dist/js/bootstrap.min.js",
"~/lib/moment/min/moment-with-locales.min.js",
"~/lib/jquery-validation/dist/jquery.validate.min.js",
"~/lib/blockUI/jquery.blockUI.js",
"~/lib/toastr/toastr.min.js",
"~/lib/sweetalert/dist/sweetalert.min.js",
"~/lib/spin.js/spin.min.js",
"~/lib/spin.js/jquery.spin.js",
"~/lib/bootstrap-select/dist/js/bootstrap-select.min.js",
"~/lib/jquery-slimscroll/jquery.slimscroll.min.js",
"~/lib/Waves/dist/waves.min.js",
"~/lib/push.js/push.min.js",
"~/Abp/Framework/scripts/abp.js",
"~/Abp/Framework/scripts/libs/abp.jquery.js",
"~/Abp/Framework/scripts/libs/abp.toastr.js",
"~/Abp/Framework/scripts/libs/abp.blockUI.js",
"~/Abp/Framework/scripts/libs/abp.spin.js",
"~/Abp/Framework/scripts/libs/abp.sweet-alert.js",
"~/lib/flatpickr/dist/flatpickr.min.js",
"~/js/admin.js",
"~/js/main.js",
"~/Scripts/jquery.signalR-2.2.3.js",
"~/Views/Shared/_Layout.js"
)
);
So I am using the minified version of jQuery and the minified version of jQuery.Validate. As soon as I use the minified version of jQuery and I load a page, jquery.validate.min.js is the first script that gets loaded in and as expected it throws a jQuery is not defined. error.
Though as soon as I do not use the minified version of jQuery (jquery.js) the scripts are loaded up in the correct order.
Is ASP.NET Boilerplate using any custom file ordering in the bundles that I do not know of? I do believe that MVC, but could be wrong, that it will process explicitly named scripts first in the bundle, then symbolically named scripts. Though these are all explicitly named scripts.
Is there something I am missing or some solution on how I can solve this?
I ended up using an answer from here: https://stackoverflow.com/a/11981271/4201348
So pretty much I defined my own BundleOrderer called AsIsBundleOrder that implementsIBundleOrderer that just returned the files as is, and set that as the orderer to use in the BundleConfig.
That works, though still doesn't give me a complete answer as to WHY (the important reason in my mind) the default orderer was only promoting jQuery validate to be before jQuery only when I used the minified version of jQuery.
I am about to start work on a non SPA ASP.NET MVC application and I was wondering what the best practices are for bundling and minifying.
I've been using webpack for react but this does not seem to fit in with a non SPA website or would this be a good fit?
I've used requirejs in the past where I used the data-main attribute to specify a file for the current view but I'm not sure how this would work with minified code where we would potentially only have 1 file.
I know .NET has its own ScriptBundler but is this still supported and should I perhaps use gulp instead?
If you're using ASP.NET MVC 5 or lower, then you can use both gulp and the script/style bundlers.
For instance, you could use gulp to do the minifying and use the script/style bundling to do the rest. This way you can use the non-minified scripts and styles during development (debug mode) whereas you only use the minified and bundled scripts in release mode.
Depending on your requirements, you can make multiple bundles and add those to your views. Performance wise, I'd suggest you use 2 bundles per page: 1 script bundle (near the closing body tag) and 1 style bundle (in the head section). Don't forget about common scripts and styles: those can be located the _Layout partial view. So you end up with 2 bundles per type per page.
I use this approach for my own projects. However, for ASP.NET Core applications, you should consider only using gulp. As far as I know, there isn't a real replacement for the bundling as we know it in ASP.NET MVC 5 applications, it just works a bit differently. But if you use gulp already, then you won't have big problems migrating to asp.net core (which you will at some point I guess).
I have a MVC 4 application in .NET 4.0. My web hosting provider (network solutions) has virtual directories setup so I can't use the default bundling behavior (I think).
In my _Layout view I have this line:
#Scripts.Render("~/bundles/dd-d2")
In BundleConfig.cs I have
bundles.Add(new ScriptBundle("~/bundles/dd-d2").Include(
"~/Scripts/dd-d2.js"));
And everything works fine when I run in visual studio. But when i upload to my web hosting, The file is not found because it appends the virtual folder in front of the bundle path.
instead of /bundles/dd-d2?v=BlahBlah, I get /ROOT_FOLDER/bundles/dd-d2?v=BlahBlah
I fixed this issue by adding this to my line in the _Layout file
#Scripts.Render(Url.Content("~/bundles/dd-d2"))
The Url.Content helper converts the virtual path into an app absolute path and it finds my bundled script files.
Now, the problem I am having with that approach is, if I make a change to the javascript file, it is NOT reflected in the outputted bundled script file. It always has the old information in it even when I upload it to my web hosting. Is this file cached somewhere? Is there a better way of doing this? I would like to take advantage of the minification of my script files by using bundling.
if I do it this way, it does work
<script src="#Url.Content("~/Scripts/dd-d2.js")" type="text/javascript"></script>
But then my script is not minified.
I have an MVC 4.5 project that has most of the UI logic organized in jQuery plugins. I want to protect my code by minification and bundling (While I understand that minification will only do so much as far as protection, it's better than leaving formatted and documented source files on the server.)
Ideally, I want my dev server to work as is -- files are non-minified and separated. But, when I deploy to the production server, I want the source files to be removed and only minified bundles to be available. Also note, on many occasions my jQuery plugins load other plugins from JavaScript code (I use head.js), so I cannot use #Script.Render for that.
What technologies do I use -- built-in MVC bundling, SquishIt, Bundler or do I need to resort to MSBuild and Microsoft Axaj Minifier? To recap, I want to remove source JS files and just be left with minified bundles in production, and, preferably, find a way to not change head.js references based on whether files are minified or not.
Thanks for your advice.
Just thought I respond with what I ended up doing here:
To recap: I wanted to obfuscate my source files with minification while not exposing the source JS files in production. I also wanted for head.js to resolve source file URLs to bundle URLs:
Put all non-minified javascript files in a folder viewable only to Admin role
Used bundling built-in to ASP.NET MVC 4.5 to generate bundles
Pointed my head.js tag to an MVC controller that returned head.js code + a javascript array with an x-ref between raw URLs and bundle URLs (available from BundleTable static object)
Bundling occurs outside of ASP.NET membership, so bundles are generated and available to anonymous users even though the source files are in the folder only accessible by Admin. Then, the trick of dynamically augmenting head.js code with server-side generated bundle URLs takes care of calling bundles from JS files.
I'm working on an ASP.NET MVC 4 app. This app leverages bundling to improve performance. Previously, the app was using jquery.mobile-1.1.0.js. Everything worked fine. However, I've upgraded to JQuery Mobile 1.2 and when I load my screen, I always see a wait spinner. I've pinpointed it to the fact that both the standard and the minified versions are being referenced. When I look in my view-source after the page is loaded, I see the following at the top:
<script src="/Scripts/jquery.mobile-1.2.0.js"></script>
<script src="/Scripts/jquery.mobile-1.2.0.min.js"></script>
From what I can tell, this was generated from the following in my ASP.NET MVC .cshtml file
#Scripts.Render("~/bundles/jquerymobile")
In my BundleConfig.cs file, I have the following definition:
bundles.Add(new ScriptBundle("~/bundles/jquerymobile").Include("~/Scripts/jquery.mobile*"));
Essentially, I want to use the normal version when the debug="true" flag is set in my web.config compilation setting. However, when debug="false", I want to use the minified version. What am I doing wrong?
Thank you
This should happen automatically for you already (assuing the fileextensionreplacement lists still have the default "min" entry for when optimizations are enabled).
As a workaround, you could try this instead which should also work:
.Include("~/Scripts/jquery.mobile-{version}.js"));
This basically is similar to your * except it will regex match for version strings. Note, both this and what you have require that you only have the latest jquery in your Scripts folder, if you still have the 1.1 version there, you will end up with both versions in your page.