[RESEARCH] Page-based loading

[sergeevabc]

There are a lot of JS loaders, really. But none of them, at least within documentation, addresses a problem I'm eager to solve. That is to use single <script> line per whole project which inits page-based loading of dependencies.

Let's create a simple project with index, portfolio, and contacts pages.

Microframework will help us with routing:

$app->get('/portfolio/',
    function () use ($app) {
        $prices = array(
              "price_mine"  => "90",
              "price_rival" => "120"
        );
        $app->render('portfolio.twig', $prices);
    })->name('portfolio');

Template engine will help us with rendering:

{% extends "base.twig" %}
{% block content %}
     <p>Aren't you sick and tired to pay {{price_rival}}…</p>.
{% endblock content %}

And the missing part in every page is <script src="/static/init.js"></script> that works as follows

• all pages load jQuery from CDN or from my server as fallback,
• index loads SoundManager to serve audio salutation,
• portfolio loads Lightbox to serve images,
• contacts loads Forms validator.

What's the best way to achieve it? And how to do that with Include.js whether it's possible?

[xmojmr]

In your example it looks like you know the dependencies already at the build time so you may use some browserify or any other build-time optimizer tool to concatenate and minify your scripts into single init.js. The yepnope lightweight loader may be of big help if you need to load those scripts from different CDNs. To me it does not look like Include.js problem or question, but I'm just a traveller passing by :)