I am using the Jammit gem to aggregate CSS and Javascript files into single resources for faster download. Using YUI compression, I assembled a large number of scripts and stylesheets into the assets.yml config file and everything gets loaded correctly in the development environment.
However, when I specify package_assets: always in the assets.yml file to enforce asset packaging under development, then suddenly multiple errors occur and the Web page fails to load properly.
As the order of the includes is correct, I do not understand what else could have gone wrong... Is it possible that Jammit reorders or damages the code of packaged Javascript files? Could it be that including already minified files into assets.yml causes problems?
which compression are you using?
i've used the YUI and everything worked great.
maybe you've got a previously minified js file and that compression is breaking it?
Related
My question could be perceived opinion based, but I am more needing for advantages and incovenients of both way to minimize JS script in a django app.
Is it better to minimize JS scripts at rendering time with python library such SlimIt or Django-pipeline to minimize all app's scripts and save them in files?
What strategy django experts are using? Is there some cases where one or other strategy is more adapted?
Other question: Can JS scripts with template tags be minimized correctly?
In my experience it doesn't matter all that much. This is down to the fact that both methods behave in a very similar way, as minification at runtime caches the results. Either in the file system in your static directory or in a cache such as memcached.
One downside to doing this at runtime though is that the first request will be slower, as the file or cache hasn't been populated yet. And the downside to generating everything manually is exactly that, you have to generate everything manually when you make changes.
My workflow involves having all static files generated at runtime during development and having them all minified and saved during production. Django pipeline does a lot of this out of the box.
I don't know how to ask the question for the confusion I am having.
Currently I am working on an already developed MVC5 project. In which I have seen that on layout page, bootstrap bundle is added and when I check bootstrap bundle code, it is having both minified and non minified js reference like below:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap.min.js"
));
I don't know if it is required to add both? Will it create any problem? What happen in case of CSS when both minified and non minified files added?
You should not use both the files at the same time
While working on the code(Debug mode) use the non minified version or the even the debug version if available as it will help to find out errors easily.
And when deploying the application use the minified version as the file will be lighter and will be loaded fast.
No, it is not require to add both the files. if you add both, it consider the last file. i suggest you to create two different bundle for production and development, and just switch the flag when you want to upload to production.
It never requires to add both the file further down the line It depends on your requirement.
They are both the same functionally but the .min one has all unnecessary characters removed in order to make the file size smaller.
If you want to edit the bootstrap js keep non-minified js in project as mini JS can't be modified or understood.
And if you are not modifying any js just keep the mini version. Mini js offers loads of benefits over its original format(non-mini). See :
Quicker download times for your users.
Reduced bandwidth consumption of your website.
Reduced number of HTTP requests on your server when combining many javascript files into
one compressed file, thus reducing the server load and allowing more visitors to access our website.
Comments and whitespace are not needed for javascript execution; Removing them will speed up script execution times.
Although Bootstrap offers custom js creation so If you see you project changes demands mini js(for faster execution and several other benefits) just go on their site and modify your js.
Note : Just to point out as well, you are better using the minified version (.min) for your live environment as Google are now checking on page loading times. Having all your JS file minified means they will load faster and will score you more brownie points.
You can get an addon for Mozilla called Page Speed that will look through your site and show you all the .JS files and provide minified versions (amongst other things).
I came across a strange issue in my recent project.
I was using Trent Richardson's Timepicker control to avail time picker functionality in my MVC 4 application. I had relevant JQuery file bundled using MVC bundling feature. I found this working quite well in development environment (Visual Studio 2012).
But when I deployed the website on IIS, I started facing a strange issue, and there was a javascript error "function expected" in that particular bundle. I could see the bundle got loaded because developer tool was showing javascript code when that bundle was selected in "scripts" tab.
Finally, when I referenced the JQuery file directly instead of bundle, it started working fine on IIS. Though the problem got solved, I am now curious to know what was wrong with that particular file if bundled, and if MVC bundling was actually an issue, then why it was working well in development environment, but not in IIS?
Any lights on this much appreciated.
Minification is a complex process by making scripts/styles smaller using techniques such variable name shortening, white space elimination, comments removal, etc... It uses ASP.NET Web Optimization that depends on WebGrease for minification. Of course, there can have issues but I personnaly never noticed that.
Here are some situations, where you should not use bundling
There is only one file in your bundle. Why bundling ?
You are using only famous frameworks such as JQuery or jQuery UI. Do not redistribute scripts that are already served by someone else. Google/Microsoft/Amazon/... already provide CDN for the most popular, open-source JavaScript libraries.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Your bundle takes only a few Bytes. Web performance Optimization suggests to limit the number of web requests. Everything has a cost. Not very optimal, but sometimes it's better to put inline scripts in your page.
In some architectures. Bundles requests contains a unique identifier used for caching. If any file in the bundle changes, the ASP.NET optimization framework will generate a new token, guaranteeing that browser requests for the bundle will get the latest bundle. When working with some architectures, JS updates can be frequent and will invalidate all your bundles.
On Dev Environment. It's is really really painful to debug a bundle.
Along with Cybermaxs' reply, I have also received following response while posted on ASP.NET Forum In case, if that helps the visitors.
What bundling suppose to do is to put together the script/stylesheet files in a single bundle into a single request and send it to the client so that the browser has to make less calls to get those required script files.
In a development environment, when you do debugging in visual studio. It doesn't do the above process unless you specify it to do so. But in a production environment, when the debug is set to false in the web.config file. it will start to do the above process.
There can be some other reasons as well. such as the script might have two versions. one for debugging and one for production. I came across such a situation with knockout. in my development enviornment I had referenced the debug version of the script. But when I put it into the production enviornment, everything came to a hault. There was a release version for the knockout script file and I had to reference that to make everything work again.
Our file structures is pretty good, organizing functionality in separate folders. My question is how do others work on applications that involves upwards of 500 JavaScript files.
We have written a maven plugin to concatenate these files together (also runs YUI compressor). However, this involves 3-10seconds of compiling for every change.
Is this step necessary for organization of a large application, I feel like a well structured HTML file pulling in all these resources would save me 45minutes every day.
For my own framework projects, typically monitoring, testing, or in-page services to orchestrate other toolkits (but not as high as your file count), my approach has been to target the individual and dynamically loaded files during development. For test, I'll run one build to compress and version the individual files, and test the individual files again because, depending on the concatenation order, compression technique, and browser, I may wind up with a script error and it's a pain to dig it out of one monster file. Third, I'll concatenate together and test once more.
In the HTML reference, I'll either target the uncompressed file, which loads specified dependencies, or the compound file. A separate bootstrap file names the dependencies, which are either included in the compound file, or loaded dynamically as needed.
This way I can add or change a file, and start developing and testing without rebuilding.
The solution is likely to concatenate and compress for user testing and production only.
For development, it's probably best to simply import them all into the HTML file. It speeds up the dev process, and also simplifies debugging. It also allows the browser to cache some of those files.
When you can't rely on cached copies (which, with 500 files, I don't think will be very often), it will slow down load times.
You can likely save a lot of time by only running the compressor in production. The YUI compressor is notoriously slow, because it uses Java Rhino interpreter to actually parse the JavaScript and analyze it etc.
Is there any software package/library that will produce a consolidated, minified JavaScript file for a production environment, while leaving the original files/references as-is in a development environment (so developers can work independently)?
JAWR does this (and more) for a Java/Groovy environment, but I haven't seen anything like it for the Microsoft .NET/IIS7 stack. Any pointers would be helpful. Thanks!
If you're looking for a good way to automatically compress and combine css & js files here are some options:
Xpedite Not bad: has one big disadantage: you can't combine files (js/css) that are included in usercontrols with the files in your page.
Shinkansen, I don't have a lot of experience with it, but I know it has a lot of configuration options.
The ClientDependency Framework was originally written for Umbraco. Now there is a package available via NuGet for both WebForms and MVC. It works really well and this is my favorite.
We use YUICompressor to minify our Javascript (and CSS) and it works well.
However, we've had to write our own HttpHandler to decide whether to minify or not on the fly, depending on a config setting (but it could equally be on whether it was a DEBUG or RELEASE build).
In fact, we cache the file once minified (or not), so we don't have to do the same process on every request.