We Keep Coding

Load required javascripts and css only

Is there any way to exclude unused javascript and css code and load only the required code for a particular web page?
Lets take an example, In web development, for any web page, there are so many javascripts and css files get included. though the page requires only 20% of the code. Is there some tool which finds dependencies and create a bundle for required code (say 20%) only.
Platform:
Web server: Apache, nginx
Scripting language: php

For controlling excess JS files take a look at RequireJS as for CSS I'm afraid you will probably need to rely on discipline.

Take a look at $import.js utility that allows dynamically control JS and CSS files as well. Less files also supports but requires additional compiling logic.

Does creating javascript dll have any advantages over adding it directly using script tag?

I am working on project with larger javascript files.I can add these javascripts in one of the two ways.
1) create a separate class library project and have the javascript files there as embedded resource.Include a reference of the dll into the web project and then include those using scriptmanager as webresource.
2)Have these files in a separate folder and then simply add these files using the script tag and there path.
I am not going to paste the javascripts in my page within the script tag cause they would mess my pages mark up.
So I would like to know which one is better of the above 2 ways.In either of the 2 ways everytime i load the web page i see GET request for the js files.If i create a javascript dll will the browser cache it?

You can't create "javaScript dll". JavaScript is a client-side stuff, dll is server-side. No matter in which project your javaScripts are, it will still be sent to the client and executed there. So it makes no sense to put JS files to another project (especially as resources)
We usually want to minify and bundle the JS files, so the client will do less requests to the server and also to reduce the amount of data to transfer.
For minifying the JS files I would recommend to use Web Essentials extension to VS. It is very handy and can make web programming easier.
Minification will remove all unnecessary characters from the JS file and it will also reduce the length of the identifiers (like method names and variable names).
You can learn about bundling here. It is useful when there are more JS files to load to load all of them at once.

how to create makefile in javascript? [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Make File for Javascript
Actually i am writing some javascript for testing purpose.
i want to use multiple javascripts in which functions are defined.
Is there any way to achieve this ?
I think Make file is the way.
But i don't know that also.
I want to generate make file.
Can any body suggest me how is to be done?

Creating makefile is an interesting solution, but you can also use require.js library to set the sequense of loaded scripts.

If you looking to combine multiple scripts as one. You can the use build script Boilerplate.
Why to use it? Its not only about scripts.
Combines and minifies javascript (via yui compressor)
Inlines stylesheets specified using #import in your CSS
Combines and minifies CSS
Optimizes JPGs and PNGs (with jpegtran & optipng)
Removes development only code (any remaining console.log files, profiling, test suite)
Basic to aggressive html minification (via htmlcompressor)
Autogenerates a cache manifest file (and links from the html tag) when you enable a property in the project config file.
Revises the file names of your assets so that you can use heavy caching (1 year expires).
Upgrades the .htaccess to use heavier caching
Updates your HTML to reference these new hyper-optimized CSS + JS files
Updates your HTML to use the minified jQuery instead of the development version
Remove unneeded references from HTML (like a root folder favicon)
Runs your JavaScript through a code quality tool (optional)

If you have several separate files and you want to append them all it into one file before, f.i. using it one your website, then any script or tool is good: Make, Rake, Cake, or your own, in your language of choice. If it goes to the web, it should be also compressed. Now how to do it, is beyond scope of this question, there are loads of articles on the web about all those topics. You are encouraged to come back when (if) you hit some more detailed problem.

Include separate CSS and JS files into the header OR all code in one CSS and one JS file?

I'm trying to optimize my website. I have a few plugins to include (jquery plugins with CSS), and my own javascript code.
Now I have the CSS in separate files for different plugins, as I downloaded them. And if I need one on the actual page, I generate code to include that. The same with the JS files. But when it comes to render a complex page with a lot of stuff, 9 CSS files can be called and 7 or 8 JS files, each of which are HTTP requests.
Should I put the CSS into one big file to reduce the number of included CSS files? But then everything will be interpreted by the browser even if the current page doesn't need so much stuff.
I've thought of a third way: generate CSS and JS files with PHP. Then it'll be always one JS and one CSS file, and only with the things which are needed. Or is it an absurd way?
What do you say, which to use to reduce page load time?

It is better to include all CSS in a file and all JS in a file and the minify them using many online services that minify and compress CSS and Javascript. this will reduce the number of http requests as well as volume of data to be downloaded.
If you generate CSS with php then the CSS and JS should be downloaded with every page and generating them takes some time, but if you pack them in one file it downloads once and the browsers caches it.
if your site has many different sections and packing all css in a file makes a huge file then you can pack CSS in two or three file and in each section load the related one.
reducing number of http request is very important.

I think your last solution is the best one.
Generate one js file and one css file from php, and don't forget to minimized/gziped them :)
Here is a very good article about optimization : http://developer.yahoo.com/performance/rules.html

This depends largely on how your users use your page. If most of the users just view one page then it makes sense to only send them the stuff that they need to display that one page (combining everything into as few requests as possible). On the other hand if most of users view multiple pages then it makes sense to send them more than they need so they will already have the CSS&JS on the next page view. But in this case you have to make sure that you are always generating the same CSS&JS with the same URI, so that the browser will not re-download the same content under a different name. You also have to setup proper HTTP caching.
What I usually do is split JS/CSS in two parts. Every page has a "common.css" and "common.js", which has stuff that every page needs (header/footer/... styles for CSS, and then jquery/common js/... for JS). Then every subpage has it's own JS&CSS that has just the stuff you need for that page (if required).

For me, the best way is somewhere in the middle - for CSS files, you better grab them all, join and compress to one file. For JS code - make for example 3+ files: one with compressed and joined external libs, one with your common stuff, and maybe next files for each bigger section - but I dont think its needed. Maybe splitting your JS code on part needed before user login, and after user login.
Remember to minify and consider asynch loading (with LAB.js for example).
Oh, and this php script... I dont think it is good idea - better use/write some script which joins and minifies your statics on compile (or deploy, or even run by hand), so there is no need to generate everythin over and over again.

Shortcut to load multiple stylesheets/scripts in the same folder

I have been working on a web page and would like to load multiple stylesheets in an external library.
Unfortunately, this library has many CSS files spread under the same folder.
The names are complicated and its such a pain to manually link it one by one.
As it
<link type="text/css" href="site/libraries/folder/highlight-areas.css"></link>
...
Is there a shortcut that loads all CSS files on the same page within the folder site/libraries/folder
I know how to do this with Ruby on Rails but that is another domain.
Is there a similar technique available on the client side?
Thanks in advance

Would the CSS #import function help you? It allows you to import a CSS file into another, so you could create one master CSS that links to the rest of library styles.

Not as such, no. Javascript does not have access to server-side information at all. (And thank goodness!) However, if you wanted to, there is nothing to stop you from:
Creating a page in some server-side scripting language that either:
A. Grabbed the contents of all of the .css files inside of site/libraries/folder and served them up as one CSS file upon request.
B. Sent your client-side script a list of all of the names of the .css files in the folder so it can load them when needed.
Set up a script in your deployment phase that either:
A. Updates your .js, .css, or .html files with the names of the .css files you want to use.
B. Concatenates all of your .css files into one file and deploys that to your server.
Each of these approaches has strengths and weaknesses. 1A requires processing time for every request (unless you cache the results, in which case you might want to consider just going for 2B) 1B will not work for clients with Javascript disabled. Both 2A and 2B require that you always run your deploy scripts after you make an edit. So it's really up to you.

Just an idea (not tested):
setup the htaccess file to allow listing the directory contents of the stylesheets directory
parse the result to extract the file names
inject the link tags using document.write