How to use this repository

This repo is organized into commits where each commit represents one step of my little make-shift presentation. Below is a list of what each step was about. You should check out the corresponding commits and take a look! If something does not work, you probably need an npm install. The long version of this document can only be found in the last commit, sorry about that!

• Run npm run serve-src, check developer tools network tab to see the waterfall.

• npx rollup -c to create bundle
• Run npm run serve, check developer tools network tab again. This should be now much faster. Also look at the created bundle and compare it with your code. All module boundaries have vanished! However there is now the danger of unintendedly polluting the global namespace if the bundle is placed in a script tag without type="module". Module script tags are safe however as they create a namespace for each module.

• Use bundle without type="module" without leaking global variables. Everyhting is wrapped in an Immediately-Invoked-Function-Expression.

• terser is a modern JS compatible fork of the (unmaintained) uglify-es

• The CLI flags can be read and edited in the config file. Run npx rollup -c --production and compare the output if you do not add the --production option.

• rollup-plugin-alias can route imports to different files. JSON files allow for nice tree-shaking optimizations but you could also just export variables from any .js file.

• rollup-plugin-node-resolve is needed to resolve imports from node_modules
• rollup-plugin-commonjs is needed to parse commonJS files
• rollup-plugin-replace can set process.env.NODE_ENV to the correct values

• needs experimentalCodeSplitting for now
• no code duplication, no runtime
• only works in modern browsers

• download e.g. SystemJS runtime
• do feature detection