vue-color icon indicating copy to clipboard operation
vue-color copied to clipboard

Why is the final bundle so big?

Open paulogr opened this issue 4 years ago • 4 comments

Hi, i'm using this package for while and looking at the code and dependencies can't figure out why the final bundle has 79.5kb minified.

Can someone help me to figure out why?

Thanks!

paulogr avatar Oct 16 '19 21:10 paulogr

Is there anyway I could only import what I only need? I've checked the bundled size and it is importing everything that the component offers.

Screen Shot 2020-04-21 at 7 31 56 PM

How do I modify it to only import Photoshop or Sketch only for example ?

ghost avatar Apr 21 '20 11:04 ghost

This library should be tree shakeable, 100%. It's way too big. Especially since most users will only import 1 or a few components.

@paulogr @davidmandeeli

In the meantime, if you have something like this

import { Sketch as SketchPicker } from 'vue-color'

You can replace it with

import SketchPicker from 'vue-color/src/components/Sketch'

I've verified that the resulting bundle is much smaller. From 80kib to 13kib

guanzo avatar May 16 '20 01:05 guanzo

Uow man, thanks, it helps a lot!

I'm using the Chrome picker was reduced from 80kb to 27kb, the +14kb it's for tinycolor dependency.

paulogr avatar May 20 '20 15:05 paulogr

Not sure if this works with the latest version anymore, I keep getting "vue-color\src\components\Chrome doesn't exist"

I think it expects a .js file while the src is a .vue file?

yellow1912 avatar Oct 21 '21 09:10 yellow1912