Вопрос

I honestly don't understand the benefit of RequireJS. If I minify and concatenate all my files using UglifyJS and place the single resulting JS file just before the closing </body> tag, do I still need to use RequireJS? Besides adding 15KB to my page-size, what benefit does RequireJS offer that you cannot get with UglifyJS?

Это было полезно?

Решение

The main point on using requireJs is to have a sane way to modularize your code. Lets say you have an app with some thousand lines of code, you don't want to handle this all in one file. So if you start split it into different files you need a way to load all the single files in the right order. Sure you can create 20 script tags and make sure they are in the right order by yourself, but as your code grows you have to add more script tags and for every file you have to find the right place. This is what requireJs is good for.

Lets say you have a 3 script A.js depends on B.js which depends on C.js

with script tags it would looks like this:

<script src="C.js"></script>
<script src="B.js"></script>
<script src="A.js"></script>


//A.js
  console.log('A' + B)
//B.js    
  B = 'B' + C
//C.js
  C = 'C'
})

with requireJs

<script src="require.js" data-main="A.js"></script>

and in every script you declare the dependecies:

//A.js
require(['B.js'], function (B) {
  console.log('A' + B)
})
//B.js    
define(['C.js'], function (C) {
  return 'B' + C
})
//C.js
define([], function () {
  return 'C'
})

This is a very simple example but the point is that you don't have to care about the order of your modules as requireJs load the in the right order.

Back to your question the optimizer is more an add on, so if you have a small code base which fits in a single file and is still maintainable, just use uglifyJs. But if you want to split your code in modules requireJs is the way to go.

Другие советы

UglifyJS and RequireJS have very distinct purposes, and both could apply to your situation.

The idea behind RequireJS, and Asynchronous Module Definition in general, is to break your code into smaller chunks, to make it easier to manage. In terms of performance, it has two main benefits:

  • faster load because you can load multiple chunks in parallel
  • smaller footprint because you only load the parts of your code that you really need in the current context

A good example is a charting library. Browsers use different standards to render graphics: svg, vml, canvas, etc. A charting library will have code for each of these standards, but at runtime it will only load the part that is relevant to the specific device and browser.

Well, if you use a single file for each page on your site, it would be terrible for code reuse.

You wouldn't want to copy/paste the same code onto each and every page. The files wouldn't be cached, either, which would drastically increase your page load times.

See also: RequireJS's "why" page

With requirejs you can have in JS the same development process you have in other programming languages.

You can write modules, and these modules can be easily reused for other projects, by simply referring their containing file.

Ultimately, when writing for web, requirejs has an optimizer that will uglify and combine the modules together in one script.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top