big bundle size - 458 KB

[eliyahuKriel]

HI, THANKS FOR THIS FAST PLUGIN .
STILL WHEN I BUILD ITS THE HEAVIEST CHUNK

ANY IDEAS TO IMPROVE PERFORMANCE ?

[serebrov]

The only way I can think of is to decide on some subset of emojis to use and then go over and extract these chosen emojis from the big json to make a smaller json and then configure the component with this reduced file.

The json datafile is big because there are around 2000 emojis and each has a set of properties like this:

  smiley: {  
      added_in: "6.0",
      emoticons: ["=)", "=-)"],
      has_img_apple: true,
      has_img_facebook: true,
      has_img_google: true,
      has_img_twitter: true,
      keywords: ["face", "happy", "joy", "haha", ":D", ":)", "smile", "funny"],
      name: "Smiling Face with Open Mouth",
      non_qualified: undefined,
      search: "smiley,smiling,face,with,open,mouth,happy,joy,haha,:d,:),smile,funny,=),=-)",
      sheet_x: 30,
      sheet_y: 27,
      short_names: ["smiley"],
      text: ":)",
      unified: "1F603",
      name: "Thumbs Up Sign",
      short_names: (2) ["+1", "thumbsup"],
      skin_variations: {
        1F3FB:             // each variation has additional set of fields:
          added_in: "6.0",
          ...
          sheet_x: 14,
          sheet_y: 50,
          unified: "1F44D-1F3FB",
        1F3FB: {…},
        1F3FC: {…},
        1F3FD: {…},
        1F3FE: {…},
        1F3FF: {…}
        },
      ...
  },

Each emoji can also have skin variations which in turn also contain most of the properties.
This data is a reduced subset of metadata provided by the emoji-data package, there is a build script that reformats the original data and removes fields that are not needed.

Maybe it can be reduced even more, I didn't try to deeply analyze this structure, but in general, the fields that are present in json file are used by the component in one or another way.

[Skye-31]

Hi there. Sorry to piggy back on this issue but it is an important one. This is my biggest bundle followed by vue itself. Perhaps a way to remove further unneeded fields would be to remove any falsey values? (Eg undefined, false, null, empty arrays or objects) and also the "added_in" field (don't see that it has any purpose?)

This would obviously be a breaking change so it does need some deeper consideration, but it could cut a decent chunk out of the bundle size. The other thing to do would be to go through every value and ensure that the component needs them, but that's obviously a lot more work. Worth considering