I have a website with very heavy (long javascript > 100KB + JQuery). So, for making the javascript re-useable, I want to separate the logic in different javascript files.
So, I want to make an aggregated javascript file
Please tell me how (I even want to use the VS2010 intellisense in my main JS file about the functions of the other JS files.)
Javascript Intellisense tends to be extremely unreliable as some updates broke it some updates fixed it, and there are a lot of extensions around it, breaking each other.
Still there is a /// <reference> element for cases like this.
See MSDN article and add line:
/// <reference path="otherscript.js" />
at the top of your script file.
Try to test it with the jQuery vsdoc and your other script files.
Also installing MVC4 installed some dependency or whatever that more-or-less fixed javascript intellisense for me.
I would recommend Resharper: http://www.jetbrains.com/resharper/whatsnew/
You can separate your Javascript files and use SquishIt to concatinate and compress/minify them all into one single file to reduce the file size and the number of requests.
I don´t know of any solution that allows you to work in both the concatinated file as well as each separated file ...and I don´t understand why anyone would want to.
IMO, Visual Studio has a quite poor intellisense for Javascript.
Related
I am currently working on a web page development. I have used downloaded one external javascript file from CanvasJs and I am using it locally to add some dynamic functionality to a graph in my page. I am using only a small functionality from the file. How do i remove the dead line that I don't use? I don't know which lines are not being used!
Note: I am using the script file to draw a spline chart, but the script file contains code for many more graphs and functionalities. How do I remove those redundant functionalities. The script file is too big with all the functions that I don't use. I wish to reduce the file size by removing the redundant line of codes.
If you are certain that you want to remove all but the code that your application calls:
Find all of the functions that your code calls in the library.
Copy each of these functions into a new file.
In each of these functions, find all functions and any global variables that they reference and return to point 2.
When you have all of the referenced functions and variables in a separate file, try your code out on it in as many different ways as you can think of to make sure that you did not miss anything out.
Do this on the un-minified version of the library and then minify the resulting code, so that it is readable for you.
Another way of stepping through the code is to use the debugger built in to your browser, by setting a breakpoint on your own code and stepping through it, then finding that code in the library file.
If you think that you might need more functionality from the library however, weigh the cost over the wire against the effort of extracting only the required code. It might be best to use the full library or to find another more specialised library if possible.
right now in my footer I have 2 .js files ( jquery.min.js - myjs.js ).
So, by considering that myjs.js is a very small file 5kb can I copy this code into the jquery.min.js file to reduce 1 request?
What is better bewtween: Leave 2 files, inline myjs.js or merge this 2 files?
Thank you
As said, you can add your code to the jQuery file, however I would not recommend doing so.
Having two separate files allows you to more easily expand, debug, and modify your own code. It would also help others looking at your site (as well as you future self) understand what's going on; alljs.js is opaque compared to appjs.js and jQuery.js. Additionally, updating jQuery in future, should you want to, is much easier if jQuery isn't mixed in with your own code. And having two separate files allows the browser to cache them independently.
If you would like to only have one JS file, including your small Javascript inline is a better option. However, I would much sooner recommend other optimizations, like setting up a build process to minimize your JS and deploy it to a dedicated production server.
Yes, provided that you host the file you can modify it however you want to - after all it's basically a text file with a file .js extension. Simply open it with a text editor (or your IDE), and add your JavaScript to the bottom. Don't delete their licensing or comments though out of respect for property rights.
Better to serve 1 file for performance purposes. The establishment of the TCP link (the pipe) to fetch the second file is not insignificant. Another option is to put that other javascript in the HTML file, in a <script> tag just before the close of your <body> tag.
I am using jquery fileupload plugin and it has 7-8 js files which it loads.
Now others developers are also working on site and sometime it cause confusion and difficult to find which js file is used where.
So i am thinking if i can combine 7 files in one file so that i can know that thats my file
Try this to compile your javascript file or code.
http://closure-compiler.appspot.com
While possibly overkill in this particular case, it might be worth checking out grunt. It will let you keep your files divided into multiple files for when you are working on them, and as soon as any file change compiling, minifying and combining them into a single/groups of files as desired, while also allowing you to define the load order of your code.
It requires some setup the first time you run it (which you can later use as a template) but greatly improves the process of combining/minifying files, and also has support for processing coffescript and sass among others, as well as writing unit tests for your code.
I use Rake to compile Javascript (and SASS to CSS, as well). It minifies the files in a unique JS. It's written in Ruby, but it's easy to configure and it works very fine.
But if more developers are working on the same code, another good idea I strongly suggest is to to use a SVN (sub-version control system), as TortoiseSVN or Git. This will allow many developers to work on the same source files, without losing any change.
Our project has more than 300 JSP files and more than 200 JavaScript files. I'd like to do some cleanup, removing unnecessary JS files. Even if the JSP includes the JS maybe none of the functions are used. The goal is to reduce both complexity and time needed to load the page. My IDE is Eclipse. Giving the dynamic nature of JavaScript I guess it will be hard or even impossible.
If it's conceivable that the application can be tested with a lot of coverage (i.e. going through every dialog, error message, and situation imaginable) you may be able to work with your access log files - compare the list of JS files to those fetched after period x of heavy use.
An alternative implementation of this would be setting up a "honeypot" (see my answer to this question).
Both these methods are of course "soft" in that their quality relies in how throroughly the application is actually used during testing time.
If you have any way of grepping all script references, that would be preferable. Maybe you can do a global search on {anything}.js, that would match most ways how to embed a JS file.
To find out what functions and javascript files are used in a project, you need code coverage tools, like JSCoverage or Code coverage for Firebug. These tools will return the functions used and the files used. Using these with an automated test suit like the Selenium or randomized testing should give you a fairly good idea which files are loaded.
If the files are loaded dynamically, you can also use Firebug or Fiddler to log the requests for the JS files.
Unfortunately if you want certainty, not just extremely high likeliness that you get with the above tools, you would have to generate a calling graph for your entire webapp, maybe using a Javascript Compiler, like Rhino...
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.