Require Js is a very cool tool, used to asynchronously load javascript files and modules, ensuring all code is modular.

It also comes with a nifty Optimizer tool, that combines related scripts together and minifies them using UglifyJs. When your code is ready for deployment RequireJs’ Optimizer Tool will minify your javascript code/application ensuring speedy download times for your end users.

Minify Javascript Code Using RequireJs

Minifying javascript code with RequireJs is very easy, and can even be run from the browser. The optimiser runs a lot faster through nodeJs, so that is my preferred environment.

  1. Unsure you have NodeJs installed along with Node Packet Manager. (npm is usually bundled with node)
  2. Install requireJs globally:
    sudo npm install -g requirejs
  3. Create a build profile in the same folder as your main application you want to minify. For example if your app was called main.js, create a build.js file in the same folder.
  4. Open the build.js  file and add some basic settings:
    ({
        name: "main",
        out: "main-built.js"
    })
  5. If you have defined some paths, or shim’d anything then add them too.
    ({
        paths: {
            jquery: "some/other/jquery"
        },
        name: <span class="string" style="color: #cc3300;">"main"</span>,
        out: <span class="string" style="color: #cc3300;">"main-built.js"</span>
    })
  6. Run the optimiser.
  7. node r.js -o build.js
  8. That’s it your done!