Inputmask: Library size

[drolsen]

Is there a way to trees shake the usage of this module? I'm using ES6 vanilla JS approach so I don't have any jQuery dependency.

Right now I've got three fields using it (phone, zip and credit card) with custom masks.

const FieldMasking = require('inputmask');

const ui = {
  label: el.querySelector('.field__label'),
  native: el.querySelector('.field__native')
};

if (el.classList.contains('input-phone')) {
  new FieldMasking('999-999-9999', {
    positionCaretOnClick: 'ignore'
  }).mask(ui.native);
}

if (el.classList.contains('input-zip')) {
  new FieldMasking('99999', {
    positionCaretOnClick: 'ignore'
  }).mask(ui.native);
}

if (el.classList.contains('input-card')) {
  new FieldMasking('9999 9999 9999 9999').mask(ui.native);
}

Once in place, I noticed my bundled JS gets an extra 78kb compressed / 188kb uncompressed and kind feels to be a bit much for only three fields.

Any suggestions?
I know masking is not easy, and I appreciate your time and efforts in this endeavor!

[RobinHerbots]

@drolsen ,

If you do the import like this, you will not load the extensions and will spare some extra kb
const FieldMasking = require('inputmask/lib/inputmask');

I hope this helps a bit.
I'm aware of the huge size and I also see this as a problem. I hope I can resolve this in the future. I also hope you can see the difference between the most masking libraries and this one. The inputmask is about "real" masking. Everything is kept generic. The mask templates gets interpreted and translated to a maskset. Validation is generated on the fly. Most other libraries take another approauch. They create more specific implementations for the most commonly used masks. Which one is better, I don't know.

[drolsen]

This was the info I needed, thank you RobinHerbots!

Changing import to direct lib has reduced my bundle size by 30kb compressed / 56kb uncompressed.

[Herz3h]

Thank you @RobinHerbots

Perhaps adding this info somewhere in the readme could be useful to future users 👍