Require.js Optimizer for a SPA with Backbone

Question

I've built a big Backbone app (lot of views, models, collections) and used require.js for module loading. Everything works as expected and smoothly.

Now I'd like to ship to the net this app, but I'd like to optimize network requests, by compacting everything on a (single?) file. I've read about Require.JS Optimizer, installed node.js and created a build file. These are my tests:

create a build file WITHOUT specifying a single module in modules section --> I obtain a copy of the source app, with all the js files uglyfied. Application works, but nothing seems changed from the network requests point of view.
create a build file WITH a single module (i.e. my main.js file) --> I obtain a copy of the source app, with all the js files uglyfied and one huge new main.js file that I suppose it includes all its dependencies (i.e. all the used files). That would solve the network requests problem, but the app doesn't start at all, starting to give me strange errors.

Which is the correct way to use Require.JS optimizer? I suppose #2, but what's your opinion? If that is the correct way, I should find out how to solve those errors...

Thanks

EDITS

This is my app folder structure:

app
 |
  --- scripts
         |
         --- libs
         --- collections
         --- views
         --- models
         --- main.js
  --- styles
  --- templates
  --- index.htm

At the same level of "app" folder I created a build folder containing r.js and build.js, whose content is this:

({
    //Directory relativa a questo file dove si trova l'app
    appDir: '../app',

    //Directory relativa ad appDir di dove si trovano i moduli
    baseUrl: 'scripts',

    //Percorso verso il file main
    mainConfigFile: '../app/scripts/main.js',

    paths:
    {
        jquery: 'libs/jquery/jquery-min',
        jqueryui: 'libs/jqueryui/jquery-ui-1.10.2.min',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        kendo: 'libs/kendo/kendo.web.min',
        kendo_it: 'libs/kendo/amd/kendo.culture.it.min',
        relational: 'libs/relational/backbone-relational',
        nested: 'libs/nested/backbone-nested-v1.1.2.min',
        rivets: 'libs/rivets/rivets.min',
        i18n: 'libs/i18next/i18next.amd.withJQuery-1.6.3',
        jvalid: 'libs/jqueryvalidate/jquery.validate.min',
        chartjs: 'libs/chartjs/chart.min',
        toastr: 'libs/toastr/toastr.min',
        templates: '../templates'
    },

    //Where to save the output
    dir: '../app-build',

    modules:
    [
        {
            name: 'main'
        }
    ]


})

I launch the building process using this command:

node r.js -o build.js

And if I run the "compiled" main.js, I got this error back:

Uncaught Error: Mismatched anonymous define() module

Any ideas?

score 0 · Answer 1 · answered Oct 04 '13 at 12:12

0

Depending on requirement of your application you can choose to

Concatenate all files into single file
Concatenate module-wise

Having every thing concatenated to single file works well for small applications but it will not scale to larger applications. requirejs has detailed documentation for this. If every thing is right, whatever method you adopt, that should not throw an error. Please provide more info about the error you are getting, that might help people answer your question properly.

answered Oct 04 '13 at 12:12

Ravi Hamsa

4,721
3
14
14

I have a folder called app with my application inside. At the same level of app, I've another folder called build which contains r.js and build.js, a configuration file like the one that you can find on Require.js website. I defined appDir, baseUrl, mainConfigFile, dir, paths and modules parameters in that file. If I launch the build using the command "node r.js -o build.js" inside the build folder, after some minutes I've another folder which contains all the app + the "concatendated" main.js. If I try to run the app I get this error: "Uncaught Error: Mismatched anonymous define() module". – Marconline Oct 04 '13 at 12:16
does this helps? http://stackoverflow.com/questions/15371918/mismatched-anonymous-define-module – Ravi Hamsa Oct 07 '13 at 00:08

Require.js Optimizer for a SPA with Backbone

1 Answers1