Some tests for comparing performance between bundling and unbundling JS
Switch branches/tags
Nothing to show
Clone or download
irori Remove crossorigin attribute from <script type=module> and use corsso…
…rigin=anonymous in preload

Chrome M71+ requests module scripts with "same-origin" credential mode by default [1].

[1] https://www.chromestatus.com/feature/6710957388595200
Latest commit 911f485 Dec 6, 2018

README.md

Browser module loading tests

This sample takes moment.js and three.js, and prepares them for loading in the browser with ECMAScript modules.

Development

Cloning this repository

Standard stuff :) Hit the "Clone or download" button in the project's GitHub landing page and go from there.

Installing dependencies

NPM packages need to be installed on the root and both src/ subdirectories.

npm i
cd src/moment
npm i
cd ../..
cd src/three
npm i
cd ../..

Gulp needs to be available globally. You can install it by doing:

npm i -g gulp

Building and developing

gulp build

Running the HTTP server

First add cert.pem and key.pem files for TLS. If you don't have these, you can use simplehttp2server to generate them for you. Place them at the root of the clone.

Then:

go run server/server.go

Or, if you don't have go command, you can use the built in HTTP server instead:

gulp serve

HTTP server command line options:

  • --http1: serve over HTTP/1.1 instead of HTTP/2
  • --push: use HTTP/2 push when serving
  • --preload: inject <link rel="preload"> tags for JS dependencies when serving

E.g., to serve over HTTP/1.1 with preload enabled:

go run server/server.go --http1 --preload

Bundled / unbundled tests

The bundled / unbundled test cases are served at the following URLs:

These tests load the files only once, so the results may be noisy. At the toplevel test page https://localhost:44333/ you can run the unbundled test cases repeatedly (25 times) and see the median time.

Synthesized module tree tests

In addition to the real-world library test cases, this HTTP server provides a benchmark for artificial module tree shapes. This is served at https://localhost:44333/synthesized/ and it accepts the following query parameters:

  • depth (default: 5): height of the module dependency tree
  • branch (default: 2): number of child modules non-leaf modules have
  • delay=n (optional): sleep n milliseconds in response handler
  • cacheable (optional): make JavaScript resources cacheable

E.g., this loads a module whose dependency tree is a perfect binary tree of depth 10 (2047 modules in total): https://localhost:44333/synthesized/?depth=10&branch=2

Note: Currently, --push and --preload options are not supported in synthesized tests.