You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
At this time, most individual assets on a webpage must be loaded in separate requests. One page can easily have over 40 requests to build it, between CSS files, images, JavaScript, web fonts, etc. I would love to be able to do something like this:
<html>
<head>
<!-- The bundle tag declares an archive of website assets that can be downloaded together. -->
<!-- If loading="lazy", wait until the first time an asset from the bundle is requested before downloading the bundle. -->
<!-- If fallback="src", the browser will try to locate the asset within the bundle first, relying on the src or href attribute if it's missing in the bundle. -->
<bundle id="webAssets" src="path/to/webAssets.zip" contenttype="application/zip" loading="lazy" fallback="src">
<!-- If the bundle feature is supported, the bundle-id and bundle-path attributes are used to load the stylesheet. -->
<!-- If the bundle feature is not supported, the href attribute is used. -->
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" bundle-id="webAssets" bundle-path="css/bootstrap.min.css">
</head>
<body>
<!-- If bundles are supported, only one request would be necessary to download all three images. No complicated sprites necessary. -->
<img src="imgA.jpg" bundle-id="webAssets" bundle-src="img/imgA.jpg">
<img src="imgB.jpg" bundle-id="webAssets" bundle-src="img/imgB.jpg">
<img src="imgC.jpg" bundle-id="webAssets" bundle-src="img/imgC.jpg">
<!-- If bundles are supported, multiple third party libraries don't need to be combined into a single JavaScript file, and can remain untouched. -->
<!-- A plugin on a CDN could bundle it's CSS, JavaScript, and images into a single bundle. -->
<script src="libraries/libA.js" bundle-id="webAssets" bundle-src="js/libA.js"></script>
<script src="libraries/libB.js" bundle-id="webAssets" bundle-src="js/libB.js"></script>
<script src="libraries/libC.js" bundle-id="webAssets" bundle-src="js/libC.js"></script>
</body>
</html>
Obviously this is just an example. It may make more sense to bundle together CSS, JavaScript, web fonts, and the company logo that are used on every page of the web application, and leave other images out to reduce the number of assets unnecessarily downloaded. Multiple bundles could exist on the same page, each with their own ids. Whatever makes sense in the application. A store's search results page could include an on-the-fly bundle path in it's JSON response containing all of the search result thumbnails.
This discussion was converted from issue #144 on October 29, 2020 00:14.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
At this time, most individual assets on a webpage must be loaded in separate requests. One page can easily have over 40 requests to build it, between CSS files, images, JavaScript, web fonts, etc. I would love to be able to do something like this:
Obviously this is just an example. It may make more sense to bundle together CSS, JavaScript, web fonts, and the company logo that are used on every page of the web application, and leave other images out to reduce the number of assets unnecessarily downloaded. Multiple bundles could exist on the same page, each with their own ids. Whatever makes sense in the application. A store's search results page could include an on-the-fly bundle path in it's JSON response containing all of the search result thumbnails.
https://webwewant.fyi/wants/49/
Beta Was this translation helpful? Give feedback.
All reactions