ryosukecla / express-lazy-router

Lazy loading for express router

express-lazy-router

Lazy loading for express router.

Motivation

I've used ts-node(ts-node-dev) for developing Node.js Web Application. It means that compile all TypeScript files at start time.

Many compilation make startup of the web app slow. Lazy routing avoid this compilation overhead by compiled when needed.

• Compilation is unbelievably slow · Issue #754 · TypeStrong/ts-node

In a frontend, We have already used lazy loading for router like React Router, Vue Router.

• Route-based code splitting | React
• Lazy Loading Routes | Vue Router

Also, webpack support experiments.lazyCompilation as experimentally.

So, We can get lazy routing in Node.js Express routing too.

Install

Install with npm:

npm install express-lazy-router

Usage

import express from 'express';
import { createLazyRouter } from 'express-lazy-router';
const lazyLoad = createLazyRouter({
    // In production, Load router asap
    preload: process.env.NODE_ENV === 'production',
});
const app = express();
// Load ./path_to_router.js when receive request to "/path_to_router"
app.use(
    '/path_to_router',
    lazyLoad(() => import('./path_to_router')),
);
app.listen(8000, () => {
  console.log(`Example app listening at http://localhost:8000`)
});

Options

preload

Default: false

If it is true, preload the router module as soon as. It does not mean sync loading.

Examples

Before: No lazy loading

index.js:

import express from 'express';
import api from "./api";
const app = express();
app.use(
    '/api',
    api
);
app.listen(8000, () => {
  console.log(`Example app listening at http://localhost:8000`)
});

api.js:

import express from 'express';
const router = express.Router();
// GET api/status
router.get("/status", (_, res) => {
    res.json({ ok: true })
});
export default router;

Behavior:

• load index.js
• load api.js
• complete to launch the express app
• GET /api/status

• { ok: true }

After: lazy loading for api.js

index.js:

import express from 'express';
- import api from "./api";
+ import { createLazyRouter } from 'express-lazy-router';
+ const lazyLoad = createLazyRouter({
+     preload: process.env.NODE_ENV === 'production',
+ });
const app = express();
app.use(
    '/api',
-    api
+    lazyLoad(() => import("./api"))
);
app.listen(8000, () => {
    console.log(`Example app listening at http://localhost:8000`)
});

api.js: No need to change!

Behavior:

• load index.js
• complete to launch the express app
• GET /api/status
• load api.js

• { ok: true }

The more details behavior when you use loader like @babel/register or ts-node.

• load index.js
  • Compile index.js by babe;
• complete to launch the express app
• GET /api/status
• load api.js
  • Compile api.js by babe;

• { ok: true }

Limitation

Avoid to use non-path router

NG: express-lazy-router does not expect this way.

import { createLazyRouter } from 'express-lazy-router';
const lazyLoad = createLazyRouter();
const app = express();
app.use(
    lazyLoad(() => import('./path_to_router')),
);
app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
});

Changelog

See Releases page.

Running tests

Install devDependencies and Run npm test:

npm test

Contributing

Pull requests and stars are always welcome.

For bugs and feature requests, please create an issue.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

• azu: GitHub, Twitter

License

MIT © azu