I’m working on a fairly big JavaScript application and wondering about the best ways to structure and deploy it. My main goals are to make it faster for users to load and easier for developers to work with.
Right now our code is organized like this:
var AppCore = {
setting1: null,
setting2: null,
users: {
/* tons of methods and properties */
},
products: {
/* tons of methods and properties with nested objects */
}
/* continues like this for several hundred kilobytes */
}
Currently everything lives in a single JavaScript file that’s unminified and easy to read during development. We also use jQuery plus some plugins. The main issues we’re running into are that finding specific code takes way too long and browsers need to fetch many separate files.
Do most teams use multiple development files that get bundled into one minified production file? What other tips would you recommend for this kind of setup?
Been there with massive global objects. Code splitting at the feature level saved us - don’t just bundle everything together. We broke up the monolithic structure into separate modules, then added dynamic imports for sections users might never touch. Huge performance gains since most people only use 30% of the functionality. Get a proper dev server with hot reloading too - way faster than constantly refreshing. Tree shaking in our build pipeline cut tons of unused code we didn’t know existed. Setup took a week but development speed shot up once it was running.
We hit the same wall when our project crossed 500kb. Game changer was ditching the global object pattern for proper modules. Now each feature gets its own file - users.js, products.js, you get it. Dev mode loads them separately so debugging’s easier, but the build process smashes everything into one minified bundle for production. Maintainability difference is night and day. I can find any function in seconds instead of scrolling through monster files. We also added lazy loading for stuff that’s not critical - cut initial load time by 40%. Build step’s a bit more work but modern tools handle it pretty smoothly.
def agree! we did the same with webpack too, totally improved our workflow. also, using es6 modules really helps organize things better and makes it easier to understand dependencies. gives you more flexibility during dev and smoother builds, plus your app will load faster!