search

aeternity / aepp-components

deprecated: aepp-components to be used in all aepps.
ISC License
41 stars 14 forks source link

[WIP] Bundle-size improvements, and component splitting #118

Closed ghost closed 6 years ago

ghost commented 6 years ago

Task

Bundle-size improvements, and component splitting

Description

The component bundle size is too big, thus we need to reduce the bundle size, also there are cases where only one or two components are needed and importing the entire component bundle is a waste of space

Flow

Will work on setting up a good webpack bundle process, that makes use of chunking, code-splitting

davidyuk commented 6 years ago

Something similar happened in tree-shaking branch.

davidyuk commented 6 years ago

I think this changes is not needed because components package is tree shakable if used Webpack 3 and above. For example in the Base app using Webpack 2.6 (current master branch) parsed size of components package was 1.28 mb from 1.28 mb initial size, using Webpack 3.6 (develop branch) it is just 0.35mb/0.97mb. https://github.com/aeternity/aepp-identity/pull/127

ghost commented 6 years ago

@davidyuk

380kbs, for 30 components its not a normal size, generally a component would be around 2-5KB uglified/minified. And that talking if its a big component.

Currently each component has SVGs encoded in the JS, thats fair, reduces overhead and makes it more compact.

But the crazy thing is that the library imports Vue, Ethereum Blockes that is 500kb unminified, BN.js 3 times, and other stuff that I have no idea why they're needed, when ae-components basic functionality should be as an Interface rather functionality.

No person in the right mind wants to install 380kb of minified stuff into their app.

Tree-shaking is doing nothing right now, one because somehow in some cases require() is used and not the ES2015 import/export (https://webpack.js.org/guides/tree-shaking/#conclusion)

ghost commented 6 years ago

I tried blocking all node_modules packages from getting bundled and the final size was 85KB minified, this can even go lower, to maybe up to 40-50KB for those 30 components.

davidyuk commented 6 years ago

@sqevani Can we use vue-cli instead of setting this by ourselves? https://cli.vuejs.org/guide/build-targets.html#web-component