vNext Async Dependencies
by Troy Rhinehart
Why?
- Lodash (8.4%)
- OLS Core (2.6%)
- HTTP/2 +Cache (15 deps)
- Shared Deps
- editor
- api
- render
- sdk-app
Lodash
- Ship Core instead of Full
- ~24kB vs ~4kB gzipped
- 83% decrease
- Add more as needed
import _, { merge, forEach } from 'lodash';import _ from 'lodash/core';
import merge from 'lodash.merge';
import forEach from 'lodash.foreach';before
after
How?
- AMD
- SystemJS
- Registry?
AMD
Asynchronous module definition
define("components/Hello", [
"react"
], React => {
return props => {
return React.createElement("h1", props, "Hello World")
};
});
define("app/index", [
"react", "react-dom", "components/Hello"
], (React, ReactDOM, Hello) => {
ReactDOM.render(
React.createElement(Hello),
document.getElementById("app")
);
});
require(["app/index"]);SystemJS
Dynamic ES module loader
System.register("components/Hello.js", ["react"], (_export, _context) => {
let React;
return {
setters: [_React => {
React = _React;
}],
execute: () => {
_export('default', props => {
return React.createElement("h1", props, "Hello World")
});
}
}
});
System.register("app/index.js", ["react", "react-dom", "components/Hello.js"], (_export, _context) => {
let React, ReactDOM, Hello;
return {
setters: [_react => {
React = _react.default;
}, _reactDom => {
ReactDOM = _reactDom.default;
}, _componentsHelloJs=> {
Hello = _componentsHelloJs.default;
}],
execute: () => {
ReactDOM.render(
React.createElement(Hello),
document.getElementById("app")
);
}
}
});
System.import("app/index.js");