How is JavaScript library bloat mitigated with Web Components?

Question

As someone who has tried to find a way to help content authors develop and maintain big web sites by creating (HTML) components for years, I\'m really excited to see web compone

Answer 1

Say that I develop component A which has a dependency for underscore.js and want to use components B and C which have dependencies on lodash.js version 1.*, etc. I don't see any way to flag dependencies and library versions.

There's an old ECMA spec from 1999 (ECMA-290) that specified a component mechanism which included elements and attributes for dependencies and library versions:

For dependencies, use the customizer element. For versioning, use the meta element. For example:

A JSON encoding for modern implementation would look like:

{
"component":
 {
 "name":"com.mycompany.selectnav",
 "displayname":"SelectNav",
 "src":"selectnav.js",
 "env":"client",
 "hint":"Navigational Select List",
 "version":"1.0",
 "needsform":"yes",
 "customizer":
   {
   "type":"ecmascript",
   "url":"http://com.com/foo",
   "meta":
     {
     "name":"version",
     "value":"1.1b"
     }
   }
 }
}

Lifecycle callbacks integrated with a CDN API, an API checker, and an on-demand script loader would be another option:

createdCallback => check API URL => createElement for dependent script tags => onload event for dependent script tags => appendChild for dependent script tags

Subsetting HTML as in the following projects is a solution which has been tried numerous times:

• GitHub - ampproject/amphtml: AMP HTML source code, samples, and documentation. See below for more info.

• XHTML™ Basic 1.1 - Second Edition

• X-Tag ★ Web Components

• coverage-ext

• How To Clean Up Your JavaScript Build With Tree Shaking

• Eliminating Unused CSS

• Analysing and minimising the size of client side bundle with webpack and source-map-explorer

• polyfill.io

References

• ECMA-290: ECMAScript Components Specification (PDF)

• Browser-based distributed evolutionary computation: performance and scaling behavior (ACM)

• Custom Elements Callback Queue

• Web Components Custom Elements Specification: Types of Custom Elements

• Lazy evaluation of CommonJS modules

• The Cost of Small Modules

• Yepnope load from CDN with Fallback (Example)

• Providing Local JS and CSS Resources for CDN Fallbacks · Edd Mann

• Plugin Pros and Cons

• Caja Playground