Split app's javascript in multiple JS files using require.js

Split app's javascript in multiple JS files using require.js

I've been looking for a way to split my one page app's js file in more than one. Like this:

plugins.js  open.js  closed.js  admin.js  

So, when the user loads the first page, plugins.js and open.js is loaded. The other are loaded only when in specific pages (like a closed section or an admin section, which is closed so I'd load it after the other ones). Today all my app users load the whole heavy and minified javascript file.

Am I able to do that using require.js? I couldn't find any reference to this kind of approach.

Thanks.

Answer by Wallace Sidhrée for Split app's javascript in multiple JS files using require.js

You might want to have a look at Grunt.js and combine it with its contrib-uglify plugin. I've made a simple boilerplate package to help get me started on new projects, which include Grunt and a simple contrib-uglify implementation here.

You'll have to specify which files should be concatenated into which files, then you can load each file dynamically depending of where you are in your app.

You could also use Modernizr to do feature detection to/and/or assign corresponding classes to the html tag on your page and then use Yepnope to asynchronously load resources conditionally and serve only the files your users need - according to the features available or just based on classes you have defined, like contact-page, for instance.

Answer by Nikos Paraskevopoulos for Split app's javascript in multiple JS files using require.js

Please take a look at require-lazy. It is functional, but documentation is a bit lacking for the time being, so the best thing to do is take a look at the examples.

In few words what it does is that it creates a layer on top of the optimizer (r.js) so as to sense application split points and generate the appropriate bundles. Application split points can be declared explicitly using the lazy! AMD plugin:

define(["module1","lazy!module2"], function(m1,m2) {...});  

In the case above, module2 is not loaded; an object with a get() method is injected instead. module2 is loaded only when m2.get() is called (it returns a promise). The build process will create 2 bundles for the case above: One that contains the main file and module1.js and one that contains module2.js.

I have also implemented a mechanism for "discovering" modules, see the module-discovery example.

Related projects: require-lazy-grunt (soon to take off) and angular-require-lazy.

Answer by kraxor for Split app's javascript in multiple JS files using require.js

You can divide your JS code into several smaller files. Then in each page's section include only the relevant JS files.

    ...            

If you really need to decide whether to load a script file dynamically, then RequireJS will do the job. It's well documented on their website how to use it. However, from what I understand, it would be an overkill in your case.

Answer by Andrew Faulkner for Split app's javascript in multiple JS files using require.js

I recommend using Webpack for this purpose instead of requireJS. Webpack was explicitly designed for the purpose of compiling frontend code together - i.e. pulling dependencies in to generate a single js file from many modules - then splitting it into multiple files as per each page's needs. It's not a complete 180 degree change - you can leave a huge portion of your requireJS syntax in place, since it supports AMD modules out-of-the-box (along with UMD and CommonJS). The process of switching isn't too complicated.

It can also be used to watch your files, and automatically recompile when one of them changes - so the proper split-up of your code is continuously maintained.

It also does a lot of really cool things above and beyond RequireJS, such as handle cross-dependencies between CSS and JS files, inject requested shims into all files, etc..

On a side note, I find Webpack especially powerful when integrated into a Gulp autocompile workflow. You don't have to - I just found the combination worked particularly well.

Answer by valaxy for Split app's javascript in multiple JS files using require.js

Of course!

Check the requirejs official multipage demo

One requirejs config fed and multiply minified javascript files out

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72