Today I Learned - Rocky Kev

TIL Cherry-picking out of bootstrap-vue

POSTED ON:

TAGS: javascript vue

I found one of my old projects was importing the entirety a library. Bootstrap Vue, if you haven't used it, is pretty hefty.

A more performant solution would be to import only the pieces that I would need.

Just cherry-pick!

via the blogpost: If you are using a component library that uses ES modules like bootstrap-vue, you can cherry pick its components instead of just registering all of them globally.

// bad
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';

Vue.use(BootstrapVue);


// better
import {
 Modal,
 Table,
 Pagination,
 Button,
 Layout,
} from 'bootstrap-vue/es/components';

import bTooltipD from 'bootstrapvue/es/directives/tooltip/tooltip';

[Modal, Table, Pagination, Button, Layout].forEach(comp => {
  Vue.use(comp);
});

Vue.directive('b-tooltip', bTooltipD);

via [How to Boost Vue.js Performance](https://medium.com/@tugayyaldiz/how-to-boost-vue-js-performance-c7df027ff3f5](https://medium.com/@tugayyaldiz/how-to-boost-vue-js-performance-c7df027ff3f5)

Related TILs

Tagged: javascript

TIL what is npm Script

Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.

TIL fancy methods to transform Javascript Objects

You can use Object.entries(), Object.keys(), Object.fromEntries()...

TIL how to hide your JS code

ONE THING TO NOTE: Encrypting a script is stronger than obfuscation, both methods are still not adequate to protect secret content. Honestly, I don't think it's worth it on a production site, and instead just go with pure server-side if you want security. But it's fascinating.