{"id":14087,"library":"systemjs-route-bundler","title":"SystemJS Route Bundler","description":"systemjs-route-bundler is a specialized build tool designed to optimize single-page applications built with SystemJS. Instead of creating a single monolithic JavaScript bundle, it splits an application into multiple smaller bundles based on top-level routes. This approach aims to significantly reduce initial page load times by lazy-loading route-specific code as needed. It leverages SystemJS Builder internally to perform the bundling operations. The current stable version is 1.6.0. Given the project's last commit was around 2018 and the JavaScript module ecosystem has rapidly evolved, it is largely suited for legacy SystemJS-based applications and is considered abandoned. Its key differentiator was providing intelligent, route-based code splitting specifically for SystemJS, particularly useful when paired with solutions like ocLazyLoad-SystemJS-Router to enhance application load performance.","status":"abandoned","version":"1.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/Swimlane/systemjs-route-bundler","tags":["javascript","systemjs","route","bundler"],"install":[{"cmd":"npm install systemjs-route-bundler","lang":"bash","label":"npm"},{"cmd":"yarn add systemjs-route-bundler","lang":"bash","label":"yarn"},{"cmd":"pnpm add systemjs-route-bundler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for performing the actual SystemJS bundling and tracing operations.","package":"systemjs-builder","optional":false}],"imports":[{"note":"This package is a CommonJS module that exports a single function. Direct ESM imports are not supported.","wrong":"import bundler from 'systemjs-route-bundler';","symbol":"BundlerFunction","correct":"const bundler = require('systemjs-route-bundler');"},{"note":"There is no exported type or class for the configuration object. Refer to the package's README or JSDoc for available options and their types.","symbol":"BundleConfiguration","correct":"// Configuration is a plain JavaScript object passed to the bundler function."}],"quickstart":{"code":"const gulp = require('gulp');\nconst path = require('path');\nconst bundler = require('systemjs-route-bundler');\n\n// --- Dummy Project Setup (for quickstart context) ---\n// To make this runnable, ensure you have a basic SystemJS project structure:\n// 1. `systemjs.config.js`: Your SystemJS configuration (e.g., `module.exports = { map: { 'app': 'app' }, packages: { 'app': { defaultExtension: 'js' } } };`)\n// 2. `app/main.js`: Your application's main entry point (e.g., `console.log('Main app loaded'); import './routes/home/index';`)\n// 3. `app/routes/home/index.js`: A route entry file (e.g., `import '../shared/data.js'; console.log('Home route loaded');`)\n// 4. `app/routes/about/index.js`: Another route entry file (e.g., `import '../shared/data.js'; console.log('About route loaded');`)\n// 5. `app/routes/contact/index.js`: A third route entry file (e.g., `console.log('Contact route loaded');`)\n// 6. `app/shared/data.js`: A shared module (e.g., `export const data = 'shared data';`)\n\nconst bundleConfig = {\n  baseURL: '.', // Base URL for your project files\n  dest: 'dist', // Destination directory for the output bundles\n  main: 'app/main.js', // The main entry file of your application\n  destMain: 'dist/app/main.js', // Destination path for the main bundle\n  routes: [\n    'app/routes/home/index.js',\n    'app/routes/about/index.js',\n    'app/routes/contact/index.js'\n  ], // Array of top-level route files to be bundled separately\n  bundleThreshold: 0.6, // Ratio of routes including a module for it to be bundled in the main bundle\n  systemConfig: 'systemjs.config.js', // Path to your SystemJS configuration file\n  sourceMaps: true, // Generate source maps for debugging\n  minify: false, // Do not minify the output JavaScript\n  mangle: false, // Do not mangle variable names\n  verboseOutput: true, // Output detailed debug information during bundling\n  ignoredPaths: [\n    'node_modules/*' // Example: ignore external libraries from the bundling logic\n  ]\n};\n\ngulp.task('bundle-systemjs-routes', async function() {\n  console.log('Initiating SystemJS route bundling...');\n  try {\n    await bundler(bundleConfig);\n    console.log('SystemJS route bundling completed successfully!');\n  } catch (error) {\n    console.error('SystemJS route bundling failed:', error);\n    process.exit(1);\n  }\n});\n\n// To run this Gulp task:\n// 1. Install Gulp globally (`npm install -g gulp-cli`) and locally (`npm install --save-dev gulp`).\n// 2. Create the dummy project files as described above.\n// 3. Run `gulp bundle-systemjs-routes` in your terminal.","lang":"javascript","description":"Demonstrates how to integrate systemjs-route-bundler into a Gulp build script to generate route-specific bundles for a SystemJS application. This example includes a full configuration object and assumes a basic project structure."},"warnings":[{"fix":"For new projects, strongly consider migrating to modern bundlers like Webpack, Rollup, or Vite. For existing legacy projects, explicitly pin specific Node.js and 'systemjs-builder' versions known to be compatible with your setup. Regularly audit dependencies for security issues.","message":"The underlying 'systemjs-builder' project, which this package relies on, is no longer actively maintained. This leads to potential compatibility issues with newer Node.js versions, unresolved dependency vulnerabilities, and lack of support for modern JavaScript features or module resolution strategies.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Evaluate the long-term viability of using this tool. If maintaining a legacy SystemJS application, ensure comprehensive testing and consider alternative, actively maintained solutions if migration is feasible.","message":"This package itself is considered abandoned, with no active development or maintenance since approximately 2018. It is not recommended for new projects and should be used with extreme caution in existing ones, especially regarding security updates or compatibility with ecosystem changes.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Thoroughly review your `systemjs.config.js` file and verify that `baseURL` and `routes` paths in your `bundleConfig` are correct and resolve to existing files. Enable `verboseOutput: true` in the configuration to receive more detailed tracing and error information from SystemJS Builder.","message":"Incorrect SystemJS configuration (e.g., `baseURL`, `systemConfig` path, `map`, `paths`, `packages`) or misconfigured `routes` options can lead to module resolution errors or incomplete/incorrect bundles. The error messages from the underlying `systemjs-builder` can sometimes be cryptic.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.6.0':80 '2018':89 'abandon':111 'aim':47 'applic':19,34,107,139 'approach':46 'around':88 'base':39,106,120 'build':11 'builder':68 'built':20 'bundl':30,38,73 'bundler':3,7,145 'code':62,121 'commit':86 'consid':110 'creat':25 'current':76 'design':13 'differenti':114 'ecosystem':94 'enhanc':138 'evolv':97 'given':81 'initi':51 'instead':23 'intellig':117 'intern':69 'javascript':29,92,142 'key':113 'larg':100 'last':85 'lazi':57 'lazy-load':56 'legaci':103 'level':43 'leverag':66 'like':132 'load':53,58,140 'modul':93 'monolith':28 'multipl':36 'need':64 'oclazyload':134 'oclazyload-systemjs-rout':133 'oper':74 'optim':15 'page':18,52 'pair':129 'particular':126 'perform':71,141 'project':83 'provid':116 'rapid':96 'reduc':50 'rout':2,6,44,60,119,144 'route-bas':118 'route-specif':59 'router':136 'signific':49 'singl':17,27 'single-pag':16 'smaller':37 'solut':131 'special':10 'specif':61,123 'split':32,122 'stabl':77 'suit':101 'systemj':1,5,22,67,105,125,135,143 'systemjs-bas':104 'systemjs-route-bundl':4 'time':54 'tool':12 'top':42 'top-level':41 'use':127 'version':78","created_at":"2026-04-20T01:57:51.483605+00:00","updated_at":"2026-04-20T01:57:51.483605+00:00","problems":[{"fix":"Ensure `systemjs-builder` is installed as a dependency (`npm install systemjs-builder`). Check its version requirements and ensure it's compatible with `systemjs-route-bundler` and your Node.js version. Downgrading Node.js or `systemjs-builder` might be necessary.","cause":"The core dependency 'systemjs-builder' is either not installed or its version is incompatible with the bundler or your Node.js environment.","error":"Error: Cannot find module 'systemjs-builder'"},{"fix":"Verify that your `systemjs.config.js` file is correctly configured and accessible. Check the module paths in your application code and ensure all modules are resolvable relative to the `baseURL`. Use `verboseOutput: true` to obtain more context from the SystemJS Builder error.","cause":"SystemJS's module resolution failed for a specific module during the bundling process, often due to an incorrect SystemJS configuration (e.g., `map`, `paths`, `packages`) or a missing file.","error":"SystemJS Builder Error: Error: Unable to resolve 'some/module' from 'another/module.js'"},{"fix":"Double-check the `routes` array in your `bundleConfig` to ensure it's an array of strings pointing to valid route entry files. Confirm that the `systemConfig` option correctly specifies the path to an existing and valid SystemJS configuration file.","cause":"This often occurs when the `routes` array in your `bundleConfig` is improperly formatted (e.g., not an array of strings) or when the `systemConfig` path is incorrect, preventing the bundler from correctly parsing input.","error":"TypeError: Cannot read properties of undefined (reading 'length')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"systemjs-route-bundler","cli_version":null,"type":"library","homepage":"http://swimlane.com/","github":"https://github.com/Swimlane/systemjs-route-bundler","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/systemjs-route-bundler","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops","http-networking","web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}