Own your

Build Step

—own your code

Lukas Taegert-Atkinson

Why don't we run JavaScript like a
scripting language
any more?

Exhibit A

web application load time over slow network

github.com/TNG/next-generation-scrum-poker

unbundled: 18.29s

bundle code

(no minification)

bundled: 7.48s

Bundling avoids the
load → parse → discover
waterfall

Exhibit B

node server size and startup time

apollographql.com/docs/apollo-server/getting-started

Bundling decreases size and startup time
for servers, cloud functions,
command line tools, ….

Why Rollup?

No assumptions about target environment
(browser, Node, …)

customize via plugins
six output formats (ES, CommonJS, …)

No-overhead ES module bundling

ideal for libraries/intermediate files

Best-of-class no-setup dead-code-elimination

We own the build step, now let's

Own the code

—write our own plugins!

Open the slides:

https://lukastaegert.github.io/devops-js/#/7

1. Inject information

2. Patch up files

Module life-cycle

Module

id:

"/main.js"

code:

"import './foo';"

Plugin A

Plugin B

Core

resolveId

source:

"./foo"

importer:

"/main.js"

/foo.js

load

id:

"/foo.js"

log('foo');

transform

code:

"log('foo');"

id:

"/foo.js"

log('bar');

import log

                     from 'log';

                    log('bar');

source: "log", importer: "/foo.js"

3. Replace files

4. Add virtual modules

5. Access output information

There is much more...

Check out the documentation:
rollupjs.org/guide/en/#plugin-development

High level tooling

Frontend dev tools powered by Rollup

Library bundlers powered by Rollup

Want to find out how the slides work? Check out
https://github.com/lukastaegert/devops-js

Thank you

& happy bundling!

Lukas Taegert-Atkinson