All Aepp Components are loaded, even if the application only uses some.

[ricricucit]

I've been building my first VueJS Aepp, and even tho I've added only 2 components doing

import { AeHeader, AeButton } from '@aeternity/aepp-components'

This is the JS bundle I get from a webpack -p (already compressed, not GZipped: ~7MB).

NOTE:

• I also never use, nor include things like bn.js.
• There might be ways to threeshake the app using the components, but I would probably suggest to think about ways to fix this problem in this repo.
  • A solution for this, may be splitting components into separate packages...or find a good way to treeshake, and add instructions on how to do that in this repo's Readme.

[dadaphl]

Could you please provide the package.json of your application?

BN.js is a dependency of ethjs-units, which is a dependency of aepp-components

[ricricucit]

Find the package.json of the app I'm building ATM: https://github.com/aeternity/beer-aepp/blob/master/package.json

I imagined BN.s came from there, but the "problem" it's that none of my included components (aeHeader and aeButton) actually need that dependency. What would be ideal, is that only actual dependencies would be included.

This is not, in any way, something I can imagine being quickly fixed...so I just wanted to point out the problem, to simply start a discussion on possible solutions (I guess, I can be included in the discussion, if you think I could be be able to help you out).

[acdbaykal]

@ricricucit In theory webpack should take care of the tree shaking.

Edit: @dadaphl Possibly in the only thing needed is declaring the project side effect free (https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free)

[acdbaykal]

The suggestion on https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free did not work.

https://github.com/webpack/webpack/issues/5944 https://github.com/webpack/webpack/issues/5923

[acdbaykal]

@ricricucit, @dadaphl, I was not able to facilitate webpack's tree shaking.However I came up with an ok solution I think. I edited the build process to include each component as a separate importable file. Every component can also be imported as in

import AeAddress from '@aeternity/aepp-components/dist/aeAddress'

I suspect that It introduces duplication. If two or more imported components share subcomponents, than webpack probably will include the shared component multiple times.

please checkout https://github.com/acdbaykal/beer-aepp/tree/slim-down-components and https://github.com/aeternity/aepp-components/tree/tree-shaking and give me some feedback.

[xutm]

@acdbaykal I've tried by sideEffects. It's OK. You can verify by https://github.com/qiyuan-wang/vue-tree-shaking-example