bundle

  • property
config.bundle {Array<moduleName> | Glob}  

Specifies which modules will be progressively loaded. This is used by the build.

Array<moduleName>

Array of module names.

Glob

A glob pattern used to match module names. For example:

steal.config({
    "bundle": "components/*/*"
});

Would match components/home/home and components/admin/admin but not utils/collections/find.

Use

It is possible to load an app in chunks, rather than one single production file. If there is modules segmented by "pages", for example:

  • A home screen in "js/pages/home"
  • Search results in "js/pages/search"
  • Details in "js/pages/details"

It will be more efficient to load "search" and "details" progressively, making the "home" page load lighter. bundle allows you to create multiple production files by defining the starting point:

steal.config({
    bundle: ["js/pages/home","js/pages/search","js/pages/details"]
});

Within the main application, the condition may exist such as:

import $ from 'jquery';

if(/*route === home*/) {
    steal.import('js/pages/home');
}