This sample takes moment.js and three.js, and prepares them for loading in the browser with ECMAScript modules.
Standard stuff :) Hit the "Clone or download" button in the project's GitHub landing page and go from there.
NPM packages need to be installed on the root and both src/
subdirectories.
npm i
Gulp needs to be available globally. You can install it by doing:
npm i -g gulp
gulp build
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 servingE.g., to serve over HTTP/1.1 with preload enabled:
go run server/server.go --http1 --preload
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.
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 treebranch
(default: 2): number of child modules non-leaf modules havedelay=n
(optional): sleep n milliseconds in response handlercacheable
(optional): make JavaScript resources cacheableE.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.
Web Bundle is a file format for encapsulating one or more HTTP resources. It allows distributing a large number of module scripts as a single HTTP resource.
You need WebBundle Go tools to generate Web Bundles, which can be installed by this command:
go get -u github.com/WICG/webpackage/go/bundle/cmd/...
Then, this command will generate Web Bundles for the moment.js / three.js tests:
./gen-bundles.sh
As of April 2020, Web Bundles support is implemented only in Chromium-based
browsers, behind an experimental feature flag. To enable Web Bundles in Chrome,
turn on chrome://flags/#web-bundles
flag.
After enabling the flag, drag and drop samples-module-loading-comparison.wbn
into Chrome to open it. An index page will be displayed from which you can
choose a benchmark to run.
gen-bundles.sh
also generates dist/moment/momentjs.wbn
and
dist/three/threejs.wbn
. They only bundle the module scripts for each test.
These can be used with dist/{moment,three}/webbundle.html
to test
Subresource loading with Web Bundles.
(Note: this is a proposal in very early stage; experimental implementation
is not landed in any browsers as of April 2020.)