From ed7f7f9db9d08c906e31a7d38ce6e5417b523cb6 Mon Sep 17 00:00:00 2001 From: Hayato Ito Date: Wed, 1 Dec 2021 12:38:34 +0900 Subject: [PATCH 1/3] Introduce dependencies section --- .../dependencies-section-bundle-dep-deep.svg | 1 + .../dependencies-section-bundle-dep.svg | 1 + .../dependencies-section-resource-dep.svg | 1 + extensions/assets/dependencies-section.org | 65 +++ extensions/dependencies-section.md | 392 ++++++++++++++++++ 5 files changed, 460 insertions(+) create mode 100644 extensions/assets/dependencies-section-bundle-dep-deep.svg create mode 100644 extensions/assets/dependencies-section-bundle-dep.svg create mode 100644 extensions/assets/dependencies-section-resource-dep.svg create mode 100644 extensions/assets/dependencies-section.org create mode 100644 extensions/dependencies-section.md diff --git a/extensions/assets/dependencies-section-bundle-dep-deep.svg b/extensions/assets/dependencies-section-bundle-dep-deep.svg new file mode 100644 index 00000000..4815213f --- /dev/null +++ b/extensions/assets/dependencies-section-bundle-dep-deep.svg @@ -0,0 +1 @@ +ABCDEFGIH \ No newline at end of file diff --git a/extensions/assets/dependencies-section-bundle-dep.svg b/extensions/assets/dependencies-section-bundle-dep.svg new file mode 100644 index 00000000..cb0f9901 --- /dev/null +++ b/extensions/assets/dependencies-section-bundle-dep.svg @@ -0,0 +1 @@ +ABCDE \ No newline at end of file diff --git a/extensions/assets/dependencies-section-resource-dep.svg b/extensions/assets/dependencies-section-resource-dep.svg new file mode 100644 index 00000000..aeeafcac --- /dev/null +++ b/extensions/assets/dependencies-section-resource-dep.svg @@ -0,0 +1 @@ +main1.htmla1.jsa.pnga.cssa2.jsa3.jsb1.jsb2.jsb3.jsc1.jsc2.jsc3.jsd1.jsd2.jsd3.jsmain2.htmle1.jse.csse.png \ No newline at end of file diff --git a/extensions/assets/dependencies-section.org b/extensions/assets/dependencies-section.org new file mode 100644 index 00000000..277bf628 --- /dev/null +++ b/extensions/assets/dependencies-section.org @@ -0,0 +1,65 @@ +# Assets source + +This is the original source from where SVG files are generated. +This would be usuful if you want to update SVG files. + +SVGs files are generated with [mermaid(https://mermaid-js.github.io/mermaid/). + +#+begin_src mermaid :file dependencies-section-resource-dep.svg +graph LR + main1.html --> a1.js + main1.html --> a.png + main1.html --> a.css + a1.js --> a2.js + a1.js --> a3.js + a3.js --> b1.js + b1.js --> b2.js + b1.js --> b3.js + a3.js --> c1.js + c1.js --> c2.js + c1.js --> c3.js + c2.js --> d1.js + d1.js --> d2.js + d1.js --> d3.js + main2.html --> e1.js + main2.html --> e.css + main2.html --> e.png + e1.js --> c1.js +#+end_src + +#+RESULTS: +:results: +[[file:dependencies-section-resource-dep.svg]] +:end: + + +#+begin_src mermaid :file dependencies-section-bundle-dep.svg +graph LR + A --> B + A --> C + C --> D + E --> C +#+end_src + +#+RESULTS: +:results: +[[file:dependencies-section-bundle-dep.svg]] +:end: + + +#+begin_src mermaid :file dependencies-section-bundle-dep-deep.svg +graph LR + A --> B + A --> C + C --> D + E --> C + C --> F + F --> G + F --> I + G --> H +#+end_src + +#+RESULTS: +:results: +[[file:dependencies-section-bundle-dep-deep.svg]] +:end: diff --git a/extensions/dependencies-section.md b/extensions/dependencies-section.md new file mode 100644 index 00000000..3bc75ca9 --- /dev/null +++ b/extensions/dependencies-section.md @@ -0,0 +1,392 @@ +# Bundle Dependencies + +Last update: Dec 2021 + +Status: Proposal (Draft) + +This proposal outlines the format and usage of the `dependencies` optional +section as a part of a [Web Bundle][Web Bundle]. + +# Authors + +- Hayato Ito (hayato@google.com) + +# Introduction + +[Subresource loading with Web Bundles][Subresource loading with Web Bundles] +provides a way to load a large number of resources efficiently using a +[Web Bundle][Web Bundle]. However, it's not always appropriate for a web site to +deliver their resources in one giant web bundle. + +There are several reasons to split their resources into several bundles. +[Code Splitting][Code Splitting], splitting code into various bundles which can +be loaded on demand or in parallel, instead of having one giant bundle, if used +correctly, has many advantages, such as: + +- To prevent downloading ginormous files on initial load. +- On demand lazy-loading only when a user requests it. +- Separate common code into a separate bundle so that they can be reloaded from + a browser's cache, instead of from the network, on page re-loading or page + navigation. + +Some bundlers like [Webpack][Webpack] and [Browserify][Browserify] support +[Code Splitting][code splitting], however, +[Subresource loading with Web Bundles][subresource loading with web bundles] +doesn't provide any support for [Code Splitting][code splitting] yet. + +This proposal explain a new `dependencies` section, which provides a way to +express dependencies between _this_ bundle and _other_ bundles, aiming more +flexibility of how resources are grouped together as bundles. Bundlers can +express a dependency graph explicitly in bundles themselves. + +In actual loading time, a browser reads the `dependencies` section in a web +bundle and can get benefits. A browser can preload dependent bundles, +recursively, or fetch dependent bundles on-demand basics. Behaviors can be +specified in `dependencies` section in a declarative way. No configuration is +required outside of a bundle, thus a bundle becomes more _self-contained_. + +# Format + +TODO(hayato): Define a `dependencies` section format in [CDDL][CDDL]. Meanwhile, +this section explains a non-normative _conceptual_ format. + +The `dependencies` section maps a `resource URL` to a tuple of +(`web bundle URL`, `load type`). That declares that `resource URL` should be +loaded from an external bundle, `web bundle url`. + +For example, + +| resource URL | web bundle URL | load type | +| ------------------------------- | -------------------------------- | --------- | +| ./a.js | ./a.wbn | preload | +| ./b.js | ./b.wbn | preload | +| ./optional.js | ./optional.wbn | lazy | +| https://cdn.example.com/util.js | https://cdn.example.com/util.wbn | preload | + +- `load type` is either `preload` or `lazy`. +- If `resource URL` is absolute, `web bundle URL` must be absolute. +- If `resource URL` is relative, `web bundle URL` must be relative. +- `resource URL` and its mapped `web bundle URL` must follow a _path + restriction_ rule. + + For example, the following is fine. + + | resource URL | web bundle URL | load type | + | ------------ | -------------- | --------- | + | ./dir/foo.js | ./foo.wbn | preload | + + The following is illegal. + + | resource URL | web bundle URL | load type | + | ------------ | -------------- | --------- | + | ./foo.js | ./dir/foo.wbn | preload | + +# Usage + +Suppose that a web site has two top pages, `main1.html` and `main2.html`. They +use several resources. + +The resource dependency graph is: + +![resource dependencies](./assets/dependencies-section-resource-dep.svg) + +Note that each `*.js` file here might be the result of combining one-or-more +fine-grained raw ES module files used in development time. This proposal doesn't +care the content. It's totally up to a web site how they decide granularity of +each resource, considering various factors. + +Considering the usage patterns, they split their resources into the following +five bundles: + +![bundles dependencies](./assets/dependencies-section-bundle-dep.svg) + +## A (a.wbn) + +The bundle, `a.wbn`, has the following resources, which are required for FCP +(First Contentful Paint), for `main1.html`: + +| URL | +| ------- | +| ./a1.js | +| ./a2.js | +| ./a3.js | +| ./a.png | +| ./a.css | + +and the following `dependencies` section: + +| resource URL | web bundle URL | load type | +| ------------ | -------------- | --------- | +| ./b1.js | ./b.wbn | preload | +| ./c1.js | ./c.wbn | preload | + +## B (b.wbn) + +The bundle, `b.wbn`, has the following resources: + +| URL | +| ------- | +| ./b1.js | +| ./b2.js | +| ./b3.js | + +## C (c.wbn) + +The bundle, `c.wbn`, has the following resources: + +| URL | +| ------- | +| ./c1.js | +| ./c2.js | +| ./c3.js | + +and the following `dependencies` section: + +| resource URL | web bundle URL | load type | +| ------------ | -------------- | --------- | +| ./d1.js | ./d.wbn | lazy | + +## D (d.wbn) + +The bundle, `d.wbn`, has the following resources: + +| URL | +| ------- | +| ./d1.js | +| ./d2.js | +| ./d3.js | + +## E (e.wbn) + +The bundle, `e.wbn`, has the following resources, which are required for FCP +(First Contentful Paint), for `main2.html`: + +| URL | +| ------- | +| ./e1.js | +| ./e.png | +| ./e.css | + +and the following `dependencies` section: + +| resource URL | web bundle URL | load type | +| ------------ | -------------- | --------- | +| ./c1.js | ./c.wbn | preload | + +## main page (main1.html) + +The main page, `main1.html` includes a _bootstrap_ ` + +.... + + + +... + + + +... + + + +.... + + + +... + + + +... + +