aurelia / aurelia/framework

Putting Aurelia on a diet

Open
#692 61 comments 8 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
11.7k
Forks
608
PR merge metrics
No merged PRs in 30d

Description

There is a lot of awareness around "modern" web app sizes and their libs recently. I am assuming this is obvious so won't repeat all here (download times, parsing/startup time, mobiles, etc.).
Some libraries make efforts to reduce size, for example jQuery has slimmed down by stopping supporting old browsers and removed deprecated apis. It also offers non-bundled sources so that you can import only the modules you actually use.

Some of Aurelia's competitors take pride in being very small: React is 45K gzipped, Vue.js 17K and Inferno only a tiny 9K!
Of course, the comparaison is never completely fair because it depends on supported targets and the feature set (for example none of the numbers above include a router). But it gives an idea what to aim for.

Aurelia is not lightweight. Here's an analysis of a basic, empty app. The only dependency in `project.json` is `aurelia-bootstrapper`. It was built with Webpack 2.2 and minified with default settings. Spoiler: the whole thing is 85Ko gzipped, almost 10 times Inferno.

Here's a picture of the whole thing, the treemap is proportional to gzipped size:
![aurelia-size](https://cloud.githubusercontent.com/assets/3832820/21959136/764854e8-dabe-11e6-8842-f101043c28da.PNG)

And for reference, some modules:

Module | Raw | Minified | Gzipped |
---|---|---|---|
aurelia-binding | 166K | 91K | 20K |
aurelia-templating | 146K | 69K | 18K |
aurelia-templating-resources | 75K | 37K | 16K |
aurelia-router | 54K | 26K | 7K |
aurelia-hot-module-reload | 40K | 16K | 5K |
aurelia-polyfills | 22K | 10K | 4K |
**Full bundle** | **700K** | **343K** | **85K** |

There is essentially two ways to improve: (1) enable people to only include what they actually use (granular modules and/or tree shaking). This is already discussed in other issues. (2) reduce the size of the code.

I noticed a few low-hanging fruits:
- When using `aurelia-webpack-loader`, module `aurelia-hot-module-reload` is there even when building for prod. This is 5K (gzip) wasted, half the size of inferno!
- `aurelia-polyfills` is 3.5K (gzip), even though the target platform might not need them or the build might include them externally anyway.

There is definitely potential for improvement in the code but unless obvious wasted or duplicated code is found it will be made of many small wins. :( `binding`, `templating` and `templating-resources` are really the lion's share in the core packages.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.