web applications - Best practices for managing and deploying large JavaScript apps -

what standard practices managing medium-large javascript application? concerns both speed browser download , ease , maintainability of development.

our javascript code "namespaced" as:

var client = {    var1: '',    var2: '',     accounts: {       /* 100's of functions , variables */    },     orders: {       /* 100's of functions , variables , subsections */    }     /* etc, etc  couple hundred kb */ } 

at moment, have 1 (unpacked, unstripped, highly readable) javascript file handle business logic on web application. in addition, there jquery , several jquery extensions. problem face takes forever find in javascript code , browser still has dozen files download.

is common have handful of "source" javascript files gets "compiled" 1 final, compressed javascript file? other handy hints or best practices?

the approach i've found works me having seperate js files each class (just in java, c# , others). alternatively can group js application functional areas if that's easier navigate.

if put js files 1 directory, can have server-side environment (php instance) loop through each file in directory , output <script src='/path/to/js/$file.js' type='text/javascript'> in header file included ui pages. you'll find auto-loading handy if you're regularly creating , removing js files.

when deploying production, should have script combines them 1 js file , "minifies" keep size down.