I've got some ASP.NET that I'm deploying as an Azure cloud service. The javascript files have comments in them that I'd like not to be visible to anyone consuming the JS. I'm taking advantage of ASP.NET bundling and minification:
http://www.asp.net/mvc/overview/performance/bundling-and-minification
This seems to be a nice solution in that it removes all comments during the minifcation process. But I can't count on the fact that the user won't directly point his or her browser directly to the individual, original js files. I'm trying to figorue out how to prevent the user from pulling the js files directly (forcing them to pull only a bundle), in order to prevent viewing comments. Is there a way to implement a black list of files that can't be downloaded? If not, I was thinking of adding a series of random characters to the name of each js file. Lastly, if that doesn't seem like a good idea, I would investigate injecting something into the VS build process to strip comments on publish.
Any thoughts would be welcome.
You can use blockviewhandler in a web.config in the folder your js is in. Explicitly whitelist any files that are OK to download and then block the rest.
There's an example in this question:
Where to put view-specific javascript files in an ASP.NET MVC application?
I think you can modify your deployment process. To your production server upload only the minified js files but to your test/dev server upload everything.
Related
I have an ASP.NET MVC 5 application, this application includes HTML, CSS, and Javascript files when I do some update in HTML, CSS or Javascript and deploy it in the server, to see that change I have to clear the cache in local PC.
This is a common question, but answers are not straight as I see.
So I wish to know, can I include a function to refresh the existing HTML, CSS and JS files using javascript approach. when the application load, gets the HTML, CSS and JS files as fresh copies. This is like clear the cache in the browser using javascript.
If cannot achieve this any other alternative?
Since you're using MVC 5, this can automatically be handled for JS and CSS for you, if you use bundling and minification.
The request ...
for the bundle ... contains a query string pair....
The query string ... has a value token that is a unique identifier
used for caching. As long as the bundle doesn't change, the ASP.NET
application will request the ... bundle using this token. 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.
Essentially, the ASP.NET application will handle the caching of JS and CSS for you.
You can read more about how this works and how to implement it on the MSDN article for Bundling and Minification.
I'm not sure what you mean by caching HTML. If you're using a .cshtml file, it shouldn't be cached by default as far as I know. However, you can specify on your controller how long to cache the results of an action for, such as in this post:
You can use the OutputCacheAttribute to control server and/or browser
caching for specific actions or all actions in a controller.
If you provide my detail on how the HTML is being cached, I might be able to provide a more helpful answer.
I need to regularly send html pages to a client as standalone .html files with no external dependencies. The original pages are done with node.js and express and they contains several librairies such as High Charts.
I have done the preparation manually until now, this includes:
Transform all images into blobs
Copy all external .js and .cs inside the page
Minimize where possible (standards librairies such as jQuery or Bootstrap...)
The result is a single .html file that can be opened without an internet connection and looks just like the original.
Is there any tool to do this automatically? If not, maybe I'll code it myself in Python. Do you have any recommendation around that?
Thanks
Monolith is a CLI tool for saving complete web pages as a single HTML file
See https://github.com/Y2Z/monolith
With apologies to OP, as this answer is probably far too late for him, but I'm posting it to help anyone with a similar problem:
HTTrack is an open-source project that does almost exactly what you described, though it doesn't work perfectly on some of the more peculiar JS.
It saves the page with most of the JS, the major images, and everything that the page needs to appear complete. It can be configured to include or exclude the entire or partial JS, images, and CSS.
This does not import all of the JS and other content into the HTML file, but neatly organizes all of the content into one folder and corrects all of the paths to make the folder portable.
It also seems to have trouble grabbing some external sources that are protected, but if it is your local site and simply uses common scripts like JQuery, you should be fine. When I tested it, it correctly downloaded all of my local CSS and any valid external CSS library that I incorporated, the JQuery and derivative scripts that I was using, and the embedded images.
Just to save everyone a question, the program by default saves the downloaded websites to C:\My Web Sites.
I'm stuck in a bit of dilemma on how to get around this and was hoping someone would point me in the right direction.
I am trying to cut down on the size of css and javascript files to improve our website's performance. But the problem is, on deployment, we simply upload our current svn repository's latest development version onto the server.
I am finding it hard to add that extra step for every developer to minify files before every change, as it adds a risk for negligence and human error.
I was thinking about having the readable version of files on the server anyway, but having some kind of file monitor that will execute a minifier when a file is changed, and update the file used by the website. Has anyone implemented this before?
EDIT
We're currently running on ASP.Net 2.0, Windows Server 2003
If you are using .net on the server, you could also try RequestReduce available on Nuget. It minies and bundles your css and js and also sprites css background images. It does it on the fly so your devs don't have to do this as an extra step. As long as you have some kind of versioning in place that changes the css/js url when it is changed, RequestReduce will automatically detect the change and process the file. It does all of this in the background and there fore does not affect the response time. If the files are not versioned via the url, RequestProduce provides a dashboard where you can flush its cache. RequestReduce can be deployed with absolutely no code changes and hardly any config in most use cases.
If you are using ASP.NET, try MBCompression library - it minify files automatically and you don't need do it manually:
I have had some thoughts recently on how to handle shared javascript and css files across a web application.
In a current web application that I am working on, I got quite a large number of different javascripts and css files that are placed in an folder on the server. Some of the files are reused, while others are not.
In a production site, it's quite stupid to have a high number of HTTP requests and many kilobytes of unnecessary javascript and redundant css being loaded. The solution to that is of course to create one big bundled file per page that only contains the necessary information, which then is minimized and sent compressed (GZIP) to the client.
There's no worries to create a bundle of javascript files and minimize them manually if you were going to do it once, but since the app is continuously maintained and things do change and develop, it quite soon becomes a headache to do this manually while pushing out new updates that features changes to javascripts and/or css files to production.
What's a good approach to handle this? How do you handle this in your application?
I built a library, Combres, that does exactly that, i.e. minify, combine etc. It also automatically detects changes to both local and remote JS/CSS files and push the latest to the browser. It's free & open-source. Check this article out for an introduction to Combres.
I am dealing with the exact same issue on a site I am launching.
I recently found out about a project named SquishIt (see on GitHub). It is built for the Asp.net framework. If you aren't using asp.net, you can still learn about the principles behind what he's doing here.
SquishIt allows you to create named "bundles" of files and then to render those combined and minified file bundles throughout the site.
CSS files can be categorized and partitioned to logical parts (like common, print, vs.) and then you can use CSS's import feature to successfully load the CSS files. Reusing of these small files also makes it possible to use client side caching.
When it comes to Javascript, i think you can solve this problem at server side, multiple script files added to the page, you can also dynamically generate the script file server side but for client side caching to work, these parts should have different and static addresses.
I wrote an ASP.NET handler some time ago that combines, compresses/minifies, gzips, and caches the raw CSS and Javascript source code files on demand. To bring in three CSS files, for example, it would look like this in the markup...
<link rel="stylesheet" type="text/css"
href="/getcss.axd?files=main;theme2;contact" />
The getcss.axd handler reads in the query string and determines which files it needs to read in and minify (in this case, it would look for files called main.css, theme2.css, and contact.css). When it's done reading in the file and compressing it, it stores the big minified string in server-side cache (RAM) for a few hours. It always looks in cache first so that on subsequent requests it does not have to re-compress.
I love this solution because...
It reduces the number of requests as much as possible
No additional steps are required for deployment
It is very easy to maintain
Only down-side is that all the style/script code will eventually be stored within server memory. But RAM is so cheap nowadays that it is not as big of a deal as it used to be.
Also, one thing worth mentioning, make sure that the query string is not succeptible to any harmful path manipulation (only allow A-Z and 0-9).
What you are talking about is called minification.
There are many libraries and helpers for different platforms and languages to help with this. As you did not post what you are using, I can't really point you towards something more relevant to yourself.
Here is one project on google code - minify.
Here is an example of a .NET Http handler that does all of this on the fly.
I work on front end development and am looking to find a solution for working with javaScript between (non compressed and multiple files) development environment and (compressed and combined files) live environment.
I have found a solution with CSS which means that I only need to include one global CSS file with imports, then we combine and compress those imports when deploying to a live environment. This means that we don't have to toggle adding references in to the head for dev and live.
Any ideas on a similar solution for JavaScipt?
Thanks
Dave
If you are using jQuery it's really easy to include external Javascript files from within Javascript which is basically what you described you did with CSS.
Read up on jQuery getScript()
You can use Charles Web debugging proxy. Or smth similar.
Charles allows to give any local file instead of any url. So you can give your browser your local JS file instead of live JS. Thus you will be able to test JS or CSS changes without showing them to your users.
I use ESC to merge and compress all the independant JavaScripts to a central one, and have it run as a 'post build' task.
For Visual Studio I wrote a small console application I wrote (like ESC as someone mentioned) that is used as a post-build event. It's simple but automates the job you're describing by:
Taking a list of filenames as its arguments
Compressing each one using Crockford's JS compressor
Combining the output into one .js file
Then in the site project, the file is loaded from a resource, and a toggle is performed in a class
List<string> files = new List<string>();
#if DEBUG
files.Add("MyNamespace.Javascript.script1.js");
files.Add("MyNamespace.Javascript.script2.js");
#else
files.Add("MyNamespace.Javascript.Live.js"); // single file
#endif
// ScriptManager.Register them
You could also enable GZIP compression on the JS files for even faster load times. If you're not using the Microsoft dev environment then I'll delete this.
Thanks for all your responses. I have come up with a solution which uses some of your ideas.
i have a global js file which has a list of files to include and when run during dev just writes the script links to the page.
Then included in the deployment process is a script which parses the global js file, looks up which files it is linking together, combines and compresses them in to one global js file.
This means that I don't need any server side code during the process which makes things easier to maintain across a team of freelance front end devs.
i'll post the final bunch of code when it's ready on my blog.
I don't know how your dev environment looks like but you could put all the script tags into one file for development and have another for production that has the script tag for your one single file. For example: development_js.extension and production_js.extension.
Then it's just a matter of either using server-side include or some build tool to merge the correct file into your HTML file.