• Stars
    star
    127
  • Rank 273,077 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Generate an asset manifest file, keyed by route patterns!

webpack-route-manifest

Generate an asset manifest file, keyed by route patterns!

The Context

Modern applications (should!) take advantage of route-based code splitting. This enables an application to be compartmentalized into smaller, highly relevant "chunks" for a particular section or feature of that application. By default, this means that your application is only giving its client(s) the code it needs for that page.

The Problem

While amazing, this isn't (yet) a perfect solution. The client wants to navigate to other pages!

In a default, code-splitting configuration, when the client goes to a new page (eg; /blog), the blog page's assets only start downloading after the click has been made. What this means is that our super speedy and state of the art application is at the mercy of the client's network connection.

Our client is staring at a loading screen/spinner β€” or worse, a split-second flash of the loader β€” until the blog's code has loaded.

The Solution

With this plugin, you regain control of your application's assets. πŸ’ͺ

You are given the knowledge of exactly which files are going to be requested for each route of your application.

In turn, this means you can preemptively load the assets for /blog before the client clicks and waits.
You can begin preloading the assets for any/all routes if you desire (although all is not recommended), while still reaping the benefits of dynamic code-splitting, since the initial/critical code was kept as light as possible.

Further Reading

Install

$ npm install webpack-route-manifest --save-dev

Usage

// webpack.config.js
const RouteManifest = require('webpack-route-manifest');

module.exports = {
  // ...
  plugins: [
    new RouteManifest({
      routes(str) {
        // Assume all entries are '../../../pages/Home' format
        let out = str.replace('../../../pages', '').toLowerCase();
        if (out === '/article') return '/blog/:title';
        if (out === '/home') return '/';
        return out;
      }
    })
  ]
}

API

RouteManifest(options)

options.routes

Type: Function or Object
Required: true

Map your application's import() statements into the URL route patterns they'll operate on.

Note: Check out the supported route patterns.

When routes is a function, it receives the strings and expects a pattern (string) to be returned.

When routes is an object, its keys must be the expected import paths and its values must be the pattern strings.

Important: You may also return a falsey value to exclude the route from the manifest.

Example

Let's assume your src/app.js entry file imports pages from the sibling src/pages/* directory:

import React from 'react';
import Loadable from 'react-loadable';
import { Route } from 'react-router-dom';

// Route-Split Components
const loading = () => <div>Loading...</div>;
const load = loader => Loadable({ loader, loading });

// Our Lazy-loaded Page Components
const Home = load(() => import('./pages/Home'));
const About = load(() => import('./pages/About'));
const Article = load(() => import('./pages/Article'));
const Blog = load(() => import('./pages/Blog'));

// ...

// Assigning Routes to Components
<Route path="/" exact component={ Home } />
<Route path="/blog" exact component={ Blog } />
<Route path="/blog/:title" component={ Article } />
<Route path="/about" exact component={ About } />

At this point, your routes option will see:

  • './pages/Home'
  • './pages/About'
  • './pages/Article'
  • './pages/Blog'

As a function, routes should look like this:

routes(str) {
  let out = str.replace('./pages', '').toLowerCase();
  if (out === '/article') return '/blog/:title';
  if (out === '/home') return '/';
  return out;
}

As an object, routes should look like this:

routes: {
  './pages/Home': '/',
  './pages/About': '/about',
  './pages/Article': '/blog/:title',
  './pages/Blog': '/blog'
}

options.assets

Type: Function or Object

Optionally customize the type or as value of an asset.

Important: You may also return a falsey value to exclude the asset from the manifest.

The assets option receives the fully formed, public-facing URL of the file (aka, including output.publicPath).

Your function or object must return a valid resource "destination" value.

Below is the default assets parser:

function assets(str) {
  if (/\.js$/i.test(str)) return 'script';
  if (/\.(svg|jpe?g|png)$/i.test(str)) return 'image';
  if (/\.(woff2?|otf|ttf|eot)$/i.test(str)) return 'font';
  if (/\.css$/i.test(str)) return 'style';
  return false;
}

options.headers

Type: true or Function

Optionally include (and customize) a "headers" section per manifest entry.

Important: When configured, the output format of your manifest file will change! See Manifest Contents

When true, the default/internal function is used, which produces a HTTP Link header per pattern, pointing to the pattern's assets.

You may also provide a function to define your own Link header and/or add additional headers per route.
This function will receive:

  • assets – the Array<Asset> files for this route
  • pattern – the current route pattern string
  • filemap – the entire manifest file mapping ({ pattern: Asset[] })

Note: An Asset is defined as { type: string, href: string } shape.

options.filename

Type: String
Default: manifest.json

The output filename for the manifest.

This file is written to disk, in a compiler's configured output.path directory.

options.minify

Type: Boolean
Default: false

Minify the manifest's file contents.

options.sort

Type: Boolean
Default: true

If route patterns should be sorted by specificity. By default, this is true as to ensure client consumers (eg, route-manifest) find the correct entry for a URL path.

Note: See route-sorts Specificity explainer.

options.inline

Type: Boolean
Default: true

Attempts to inline the manifest file directly into your main entry file (eg; bundle.xxxxx.js).
When successful, the manifest will be available globally as window.__rmanifest.

While not required, it is strongly recommended that this option remains enabled so that the manifest contents are available to your Application immediately upon loading. This saves a network request and the trouble of coordinating subsequent prefetches.

Note: The manifest.json file will still be written to disk for easier developer analysis.

Route Patterns

The supported route pattern types are:

  • static – /users
  • named parameters – /users/:id
  • nested parameters – /users/:id/books/:title
  • optional parameters – /users/:id?/books/:title?
  • suffixed parameters – /movies/:title.mp4, /movies/:title.(mp4|mov)
  • wildcards – /users/*

Manifest Contents

The manifest file contains a JSON object whose keys are the route patterns you've defined for your application via the options.routes mapping.

Note: There will often be a "*" key, which signifies your common/catch-all route.
This typically contains your bundle.(js|css) files, and maybe some images that your main stylesheet requires.

Each key will point to an "Entry" item whose data type will vary depending on your options.headers configuration. Either way, this Entry will always contain an "Asset" array, so let's define that first:

interface Asset {
  type: string;
  href: string;
}

Now, without options.headers (default), the manifest pairs patterns directly to its list of Assets:

type Entry = Asset[];
// keys are `[pattern: string]`
type Manifest = Record<string, Entry>;

With options.headers configured, each manifest Entry becomes object containing "files" and "headers" keys:

interface Entry {
  files: Asset[];
  headers: any[]; // you decide its shape
}

// keys are `[pattern: string]`
type Manifest = Record<string, Entry>;

Lastly, if options.headers === true, the default function runs, providing you with this format:

interface Header {
  key: string;
  value: string;
}

interface Entry {
  files: Asset[];
  headers: Header[];
}

// keys are `[pattern: string]`
type Manifest = Record<string, Entry>;

License

MIT Β© Luke Edwards

More Repositories

1

clsx

A tiny (239B) utility for constructing `className` strings conditionally.
JavaScript
7,354
star
2

polka

A micro web server so fast, it'll make you dance! πŸ‘―
JavaScript
5,266
star
3

pwa

(WIP) Universal PWA Builder
JavaScript
3,123
star
4

uvu

uvu is an extremely fast and lightweight test runner for Node.js and the browser
JavaScript
2,938
star
5

taskr

A fast, concurrency-focused task automation tool.
JavaScript
2,528
star
6

sockette

The cutest little WebSocket wrapper! 🧦
JavaScript
2,398
star
7

worktop

The next generation web framework for Cloudflare Workers
TypeScript
1,635
star
8

kleur

The fastest Node.js library for formatting terminal text with ANSI colors~!
JavaScript
1,593
star
9

klona

A tiny (240B to 501B) and fast utility to "deep clone" Objects, Arrays, Dates, RegExps, and more!
JavaScript
1,537
star
10

dequal

A tiny (304B to 489B) utility to check for deep equality
JavaScript
1,271
star
11

tsm

TypeScript Module Loader
TypeScript
1,164
star
12

tinydate

A tiny (349B) reusable date formatter. Extremely fast!
JavaScript
1,060
star
13

sirv

An optimized middleware & CLI application for serving static files~!
JavaScript
1,023
star
14

sade

Smooth (CLI) Operator 🎢
JavaScript
1,009
star
15

rosetta

A general purpose internationalization library in 292 bytes
JavaScript
766
star
16

navaid

A navigation aid (aka, router) for the browser in 850 bytes~!
JavaScript
755
star
17

dset

A tiny (194B) utility for safely writing deep Object values~!
JavaScript
739
star
18

uid

A tiny (130B to 205B) and fast utility to generate random IDs of fixed length
JavaScript
634
star
19

httpie

A Node.js HTTP client as easy as pie! πŸ₯§
JavaScript
575
star
20

ganalytics

A tiny (312B) client-side module for tracking with Google Analytics
JavaScript
575
star
21

trouter

🐟 A fast, small-but-mighty, familiar fish...errr, router*
JavaScript
563
star
22

regexparam

A tiny (394B) utility that converts route patterns into RegExp. Limited alternative to `path-to-regexp` πŸ™‡β€β™‚οΈ
JavaScript
555
star
23

dimport

Run ES Module syntax (`import`, `import()`, and `export`) in any browser – even IE!
JavaScript
547
star
24

mri

Quickly scan for CLI flags and arguments
JavaScript
533
star
25

tempura

A light, crispy, and delicious template engine 🍀
JavaScript
514
star
26

calendarize

A tiny (202B) utility to generate calendar views.
JavaScript
471
star
27

formee

A tiny (532B) library for handling <form> elements.
JavaScript
443
star
28

qss

A tiny (294b) browser utility for encoding & decoding a querystring.
JavaScript
408
star
29

preact-starter

Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact
JavaScript
387
star
30

uuid

A tiny (~230B)and fast UUID (V4) generator for Node and the browser
JavaScript
386
star
31

vegemite

A Pub/Sub state manager you'll love... or hate
JavaScript
373
star
32

resolve.exports

A tiny (952b), correct, general-purpose, and configurable `"exports"` and `"imports"` resolver without file-system reliance
TypeScript
351
star
33

polkadot

The tiny HTTP server that gets out of your way! ・
JavaScript
322
star
34

matchit

Quickly parse & match URLs
JavaScript
321
star
35

fetch-event-stream

A tiny (736b) utility for Server Sent Event (SSE) streaming via `fetch` and Web Streams API
TypeScript
321
star
36

flru

A tiny (215B) and fast Least Recently Used (LRU) cache
JavaScript
310
star
37

mrmime

A tiny (2.8kB) and fast utility for getting a MIME type from an extension or filename
TypeScript
300
star
38

watchlist

Recursively watch a list of directories & run a command on any file system changes
JavaScript
261
star
39

arr

A collection of tiny, highly performant Array.prototype alternatives
JavaScript
255
star
40

ley

(WIP) Driver-agnostic database migrations
JavaScript
254
star
41

flattie

A tiny (203B) and fast utility to flatten an object with customizable glue
JavaScript
254
star
42

webpack-messages

Beautifully format Webpack messages throughout your bundle lifecycle(s)!
JavaScript
246
star
43

obj-str

A tiny (96B) library for serializing Object values to Strings.
JavaScript
225
star
44

templite

Lightweight templating in 150 bytes
JavaScript
221
star
45

ms

A tiny (414B) and fast utility to convert milliseconds to and from strings.
JavaScript
200
star
46

nestie

A tiny (215B) and fast utility to expand a flattened object
JavaScript
199
star
47

throttles

A tiny (139B to 204B) utility to regulate the execution rate of your functions
JavaScript
195
star
48

hexoid

A tiny (190B) and extremely fast utility to generate random IDs of fixed length
JavaScript
185
star
49

fromnow

A tiny (339B) utility for human-readable time differences between now and past or future dates.
JavaScript
178
star
50

astray

Walk an AST without being led astray
JavaScript
177
star
51

tmp-cache

A least-recently-used cache in 35 lines of code~!
JavaScript
174
star
52

bundt

A simple bundler for your delicious modules
JavaScript
167
star
53

wrr

A tiny (148B) weighted round robin utility
JavaScript
164
star
54

freshie

(WIP) A fresh take on building universal applications with support for pluggable frontends and backends.
TypeScript
153
star
55

svelte-ssr-worker

A quick demo for rendering Svelte server-side (SSR), but within a Cloudflare Worker!
JavaScript
152
star
56

totalist

A tiny (195B to 224B) utility to recursively list all (total) files in a directory
JavaScript
148
star
57

typescript-module

Template repository for authoring npm modules via TypeScript
TypeScript
141
star
58

sublet

Reactive leases for data subscriptions
JavaScript
139
star
59

escalade

A tiny (183B to 210B) and fast utility to ascend parent directories
JavaScript
138
star
60

url-shim

A 1.5kB browser polyfill for the Node.js `URL` and `URLSearchParams` classes.
JavaScript
123
star
61

semiver

A tiny (153B) utility to compare semver strings.
JavaScript
119
star
62

cfw

(WIP) A build and deploy utility for Cloudflare Workers.
TypeScript
113
star
63

svelte-demo

Multi-page demo built Svelte 3.x and Rollup with code-splitting
Svelte
113
star
64

webpack-format-messages

Beautiful formatting for Webpack messages; ported from Create React App!
JavaScript
111
star
65

gittar

🎸 Download and/or Extract git repositories (GitHub, GitLab, BitBucket). Cross-platform and Offline-first!
JavaScript
111
star
66

saturated

A tiny (203B) utility to enqueue items for batch processing and/or satisfying rate limits.
JavaScript
110
star
67

webpack-critical

Extracts & inlines Critical CSS with Wepack
JavaScript
109
star
68

pages-fullstack

Demo SvelteKit application running on Cloudflare Pages
Svelte
102
star
69

sort-isostring

A tiny (110B) and fast utility to sort ISO 8601 Date strings
JavaScript
98
star
70

colors-app

🎨 A PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
JavaScript
95
star
71

salteen

A snappy and lightweight (259B) utility to encrypt and decrypt values with salt.
JavaScript
95
star
72

is-offline

A tiny (174B) library to detect `offline` status & respond to changes in the browser.
JavaScript
91
star
73

seolint

(WIP) A robust and configurable SEO linter
TypeScript
86
star
74

rafps

A tiny (178B) helper for playing, pausing, and setting `requestAnimationFrame` frame rates
JavaScript
82
star
75

preact-cli-ssr

A quick demo for adding SSR to a Preact CLI app
JavaScript
79
star
76

webpack-modules

Handle `.mjs` files correctly within webpack
JavaScript
71
star
77

csprng

A tiny (~90B) isomorphic wrapper for `crypto.randomBytes` in Node.js and browsers.
JavaScript
66
star
78

classico

A tiny (255B) shim when Element.classList cannot be used~!
JavaScript
62
star
79

premove

A tiny (201B to 247B) utility to remove items recursively
JavaScript
62
star
80

mk-dirs

A tiny (381B to 419B) utility to make a directory and its parents, recursively
JavaScript
54
star
81

primeval

A tiny (128B) utility to check if a value is a prime number
JavaScript
51
star
82

loadr

Quickly attach multiple ESM Loaders and/or Require Hooks together but without the repetitive `--experimental-loader` and/or `--require` Node flags
JavaScript
49
star
83

preact-progress

Simple and lightweight (~590 bytes gzip) progress bar component for Preact
JavaScript
49
star
84

route-manifest

A tiny (412B) runtime to retrieve the correct entry from a Route Manifest file.
JavaScript
46
star
85

svelte-preprocess-esbuild

A Svelte Preprocessor to compile TypeScript via esbuild!
TypeScript
44
star
86

preact-scroll-header

A (800b gzip) header that will show/hide while scrolling for Preact
JavaScript
41
star
87

inferno-starter

Webpack2 boilerplate for building SPA / PWA / offline front-end apps with Inferno.js
JavaScript
41
star
88

rollup-route-manifest

A Rollup plugin to generate an asset manifest, keyed by route patterns ("route manifest")
JavaScript
40
star
89

onloaded

A tiny (350B) library to detect when images have loaded.
JavaScript
38
star
90

webpack-plugin-replace

Replace content while bundling.
JavaScript
36
star
91

route-sort

A tiny (200B) utility to sort route patterns by specificity
JavaScript
35
star
92

scorta

A tiny (330B to 357B) and fast utility to find a package's hidden supply / cache directory.
JavaScript
33
star
93

local-hostname

A tiny (171B) utility to check if a hostname is local
JavaScript
32
star
94

taskr-outdated

A generator & coroutine-based task runner. Fasten your seatbelt. πŸš€
JavaScript
32
star
95

rewrite-imports

Rewrite `import` statements as `require()`s; via RegExp
JavaScript
31
star
96

preact-offline

A (300b gzip) component to render alerts/messages when offline.
JavaScript
29
star
97

fly-kit-preact

A starter kit for building offline / SPA / PWA apps with Preact
JavaScript
28
star
98

fannypack

The tool belt for front-end developers
JavaScript
28
star
99

is-ready

A tiny (309B) library to detect when `window` globals are defined and ready to use~!
JavaScript
28
star
100

ava-http

Async HTTP request wrapper πŸš€
JavaScript
25
star