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

Question

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.

You can always include the files when you need them in the pages where you need them. — nietonfir
– nietonfir, Commented Oct 30, 2013 at 22:25

Nikos Paraskevopoulos · Accepted Answer · 2013-10-30 22:17:16Z

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.

Wallace Sidhrée · Accepted Answer · 2013-10-30 22:21:50Z

1

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.

edited Oct 30, 2013 at 22:21

answered Oct 30, 2013 at 22:15

Wallace Sidhrée

11.7k6 gold badges53 silver badges58 bronze badges

Comments

kraxor · Accepted Answer · 2013-10-30 22:36:57Z

1

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

<head>
  ...
  <script type="text/javascript" src="plugins.js"></script>
  <script type="text/javascript" src="open.js"></script>
</head>

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.

answered Oct 30, 2013 at 22:36

kraxor

7258 silver badges16 bronze badges

Comments

Andrew Faulkner · Accepted Answer · 2015-09-04 19:58:43Z

0

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.

edited Sep 4, 2015 at 19:58

answered Sep 4, 2015 at 19:53

Andrew Faulkner

3,9603 gold badges25 silver badges24 bronze badges

1 Comment

codekiln Over a year ago

link is broken for process of switching

valaxy · Accepted Answer · 2015-12-23 12:57:27Z

Of course!

Optimizer configuration options of dir and modules is what your need.

You should write something like this, one optimizer configuration file fed and multiply minified javascript files out:

{
    // dir is white your temp build files put
    dir: 'build-temp-dir',

    // one module for one minified javascript file
    modules: [{
        // module names are relative to baseUrl
        name: 'mylib/module-entry1',
        // include something else
        include: ['mylib/module2']
    },

    // other one minified javascript file
    {
        name: 'mylib/module-entry2',
        // if you don't want repetitive code put in the two out files
        // just exclude it
        exclude: ['mylib/module-entry1']
    }]

}

Be sure to check the requirejs official multipage demo and module config option

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related