It better to call it Extension API

some web extensions require the use of permissions

Instead of having a single large bundle file for your whole website, you can have multiple bundles for each page. This improves the load time of your website as you can tag bundle files to the various webpage of your site instead of one initial big download of script file.

*typo

confusing line!!

webpack chunk definition

Webpack caching using [chunkhash] is just like creating version number for your script file. filename.[chunkhash].js [chunkhash] can be assumed to be version number which the browser uses to check if the file has changed or not, and according to it updates the file in its cache.

vendor scripts

why optimised bundled modules load time is much better than unbundled modules

For non module supporting browsers we can add another script tag with the nomodule attribute

import * from "./abc.js"; This string inside the double quotes is called MODULE SPECIFIER. It is used to specify the location of the module relative to the current folder or the root folder depending on wether we used / or ./

Scripts with the async attribute are loaded(downloaded) from the server asynchronously. That means there is no order in which the script is going to be executed. It doesn't block the HTML parser Script is executed as soon as it is downloaded, does not wait for HTML parsing to finish.

CORS - Cross Origin Resource Sharing

modules have .mjs extension Not really important We can use .js as well The type attribute in our script tag is enough RECOMMENDED : We should use .mjs extension because during development it makes it easier to diffrentiate

Even the dependencies modules are defer by default

Only the latest browsers are module-supporting. For these browsers you can use a script tag with a type attribute set to module.

Sexy example below. Makes the concept of dynamic import crystal clear. Although one must know the concept of async await function.

Only when you have a small webapp