{"id":29354618,"url":"https://github.com/googlechromelabs/samples-module-loading-comparison","last_synced_at":"2025-07-09T03:15:18.376Z","repository":{"id":53601355,"uuid":"95903533","full_name":"GoogleChromeLabs/samples-module-loading-comparison","owner":"GoogleChromeLabs","description":"Some tests for comparing performance between bundling and unbundling JS","archived":false,"fork":false,"pushed_at":"2021-03-22T02:03:57.000Z","size":33,"stargazers_count":61,"open_issues_count":1,"forks_count":19,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-05-30T02:12:10.011Z","etag":null,"topics":["javascript","modules","performance"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GoogleChromeLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-30T15:56:10.000Z","updated_at":"2023-02-27T18:47:18.000Z","dependencies_parsed_at":"2022-09-09T22:04:08.104Z","dependency_job_id":null,"html_url":"https://github.com/GoogleChromeLabs/samples-module-loading-comparison","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/GoogleChromeLabs/samples-module-loading-comparison","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fsamples-module-loading-comparison","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fsamples-module-loading-comparison/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fsamples-module-loading-comparison/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fsamples-module-loading-comparison/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoogleChromeLabs","download_url":"https://codeload.github.com/GoogleChromeLabs/samples-module-loading-comparison/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fsamples-module-loading-comparison/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264384458,"owners_count":23599619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","modules","performance"],"created_at":"2025-07-09T03:15:17.570Z","updated_at":"2025-07-09T03:15:18.370Z","avatar_url":"https://github.com/GoogleChromeLabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Browser module loading tests\n\nThis sample takes moment.js and three.js, and prepares them for loading in the\nbrowser with ECMAScript modules.\n\n## Development\n\n### Cloning this repository\n\nStandard stuff :) Hit the \"Clone or download\" button in the project's GitHub\nlanding page and go from there.\n\n### Installing dependencies\n\nNPM packages need to be installed on the root and both `src/` subdirectories.\n\n```sh\nnpm i\n```\n\nGulp needs to be available globally. You can install it by doing:\n\n```sh\nnpm i -g gulp\n```\n\n### Building and developing\n\n```sh\ngulp build\n```\n\n### Running the HTTP server\n\nFirst add `cert.pem` and `key.pem` files for TLS. If you don't have these, you\ncan use [simplehttp2server](https://github.com/GoogleChrome/simplehttp2server)\nto generate them for you. Place them at the root of the clone.\n\nThen:\n\n```sh\ngo run server/server.go\n```\n\nOr, if you don't have `go` command, you can use the built in HTTP server instead:\n\n```sh\ngulp serve\n```\n\nHTTP server command line options:\n- `--http1`: serve over HTTP/1.1 instead of HTTP/2\n- `--push`: use HTTP/2 push when serving\n- `--preload`: inject `\u003clink rel=\"preload\"\u003e` tags for JS dependencies when serving\n\nE.g., to serve over HTTP/1.1 with preload enabled:\n\n```sh\ngo run server/server.go --http1 --preload\n```\n\n### Bundled / unbundled tests\n\nThe bundled / unbundled test cases are served at the following URLs:\n\n* moment.js\n  * bundled, optimized:   https://localhost:44333/moment/bundled-optimized.html\n  * bundled, unoptimized: https://localhost:44333/moment/bundled-unoptimized.html\n  * unbundled:            https://localhost:44333/moment/unbundled.html\n* three.js\n  * bundled, optimized:   https://localhost:44333/three/bundled-optimized.html\n  * bundled, unoptimized: https://localhost:44333/three/bundled-unoptimized.html\n  * unbundled:            https://localhost:44333/three/unbundled.html\n\nThese tests load the files only once, so the results may be noisy. At the\ntoplevel test page https://localhost:44333/ you can run the unbundled test cases\nrepeatedly (25 times) and see the median time.\n\n### Synthesized module tree tests\n\nIn addition to the real-world library test cases, this HTTP server provides\na benchmark for artificial module tree shapes. This is served at\nhttps://localhost:44333/synthesized/ and it accepts the following query\nparameters:\n\n- `depth` (default: 5):   height of the module dependency tree\n- `branch` (default: 2):  number of child modules non-leaf modules have\n- `delay=n` (optional):   sleep n milliseconds in response handler\n- `cacheable` (optional): make JavaScript resources cacheable\n\nE.g., this loads a module whose dependency tree is a perfect binary tree of\ndepth 10 (2047 modules in total):\nhttps://localhost:44333/synthesized/?depth=10\u0026branch=2\n\nNote: Currently, --push and --preload options are not supported in synthesized\ntests.\n\n### [Experimental] WebBundle tests\n\n[Web Bundle](https://wicg.github.io/webpackage/draft-yasskin-wpack-bundled-exchanges.html)\nis a file format for encapsulating one or more HTTP resources. It allows\ndistributing a large number of module scripts as a single HTTP resource.\n\nYou need [WebBundle Go tools](https://github.com/WICG/webpackage/tree/master/go/bundle)\nto generate Web Bundles, which can be installed by this command:\n```\ngo get -u github.com/WICG/webpackage/go/bundle/cmd/...\n```\nThen, this command will generate Web Bundles for the moment.js / three.js tests:\n```\n./gen-bundles.sh\n```\n\nAs of April 2020, Web Bundles support is implemented only in Chromium-based\nbrowsers, behind an experimental feature flag. To enable Web Bundles in Chrome,\nturn on `chrome://flags/#web-bundles` flag.\n\nAfter enabling the flag, drag and drop `samples-module-loading-comparison.wbn`\ninto Chrome to open it. An index page will be displayed from which you can\nchoose a benchmark to run.\n\n`gen-bundles.sh` also generates `dist/moment/momentjs.wbn` and\n`dist/three/threejs.wbn`. They only bundle the module scripts for each test.\nThese can be used with `dist/{moment,three}/webbundle.html` to test\n[Subresource loading with Web Bundles](https://github.com/WICG/webpackage/blob/master/explainers/subresource-loading.md).\n(Note: this is a proposal in very early stage; experimental implementation\nis not landed in any browsers as of April 2020.)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fsamples-module-loading-comparison","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglechromelabs%2Fsamples-module-loading-comparison","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fsamples-module-loading-comparison/lists"}