Load Assets Faster!
We Skipped version 2, there was a problem with our deployments to npm so a canary release tagged as a stable release and ...
Load Assets Faster!
Upgrading to version 3 should not take more than 10 minutes.
In v1, with asyncComponent you split part of your application into a new chunk, and on BROWSER when you need that part of your code it gets downloaded automatically. when page rendered on the server there was no way to understand which chunks needed for the current request so After.js only sends client.js and styles.css file, then on BROWSER with ensureReady method it tries to fetch chunks (split CSS and JS files) needed for the current request. and it's slow!
WHY?
-
browser must download
client.js, then parse it and at the end, it executes the code. when code gets executedensureReadymethod gets called,ensureReadyfinds and download chunks needed to render the current page and when all files get downloaded it start to re-hydrate. -
browser will render the page without CSS styles (because we split them and it will get them when
ensureReadycalled), this makes the site look ugly for 2,3 seconds (bad UX). -
have you ever think about why CSS is render blocking?
if browser finds a<link rel="stylesheet">tag, it would stop rendering page and waits until CSS file be downloaded and parsed completely (this mechanism is necessary to have fast page renders), if CSS files attach to dom after page gets rendered, the browser must repaint the whole page. (painting is too much job for browser and it's slow)
in After.js 2 this problem is solved and it sends all JS and CSS files needed for current requests in the initial server response.
Major Changes
Minor Changes
- Merge branch 'master' of https://github.com/jaredpalmer/after.js: 9ce92f3
- Feat(create-after-app): update default template: ae581ee
- Chore: update UPGRADING.md: 65bb605