Using Bootstrap JS components with browserify-shim

I am trying to figure out how to properly use browserify-shim in conduction with the bootstrap js or any other components. I don't always want to include the whole concatenated JS file so I splitted the modules in single shims, here's an excerpt from my package.json

"browserify": {
  "transform": ["browserify-shim"]
},
"browser": {
  "twbs-affix": "./node_modules/bootstrap/js/affix.js",
  "twbs-alert": "./node_modules/bootstrap/js/alert.js",
  "twbs-carousel": "./node_modules/bootstrap/js/carousel.js",
  "twbs-collapse": "./node_modules/bootstrap/js/collapse.js",
  "twbs-dropdown": "./node_modules/bootstrap/js/dropdown.js",
  "twbs-modal": "./node_modules/bootstrap/js/modal.js",
  "twbs-popover": "./node_modules/bootstrap/js/popover.js",
  "twbs-scrollspy": "./node_modules/bootstrap/js/scrollspy.js",
  "twbs-tab": "./node_modules/bootstrap/js/tab.js",
  "twbs-tooltip": "./node_modules/bootstrap/js/tooltip.js",
  "twbs-transition": "./node_modules/bootstrap/js/transition.js",
  "jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify-shim": {
  "jquery": "jQuery",
  "twbs-affix": {
    "depends": ["jquery"]
  },
  "twbs-alert": {
    "depends": ["jquery"]
  },
  "twbs-carousel": {
    "depends": ["jquery"]
  },
  "twbs-collapse": {
    "depends": ["jquery"]
  },
  "twbs-dropdown": {
    "depends": ["jquery"]
  },
  "twbs-modal": {
    "depends": ["jquery"]
  },
  "twbs-popover": {
    "depends": ["jquery"]
  },
  "twbs-scrollspy": {
    "depends": ["jquery"]
  },
  "twbs-tab": {
    "depends": ["jquery"]
  },
  "twbs-tooltip": {
    "depends": ["jquery"]
  },
  "twbs-transition": {
    "depends": ["jquery"]
  }
}

Now when I need the twbs-alert module somewhere I can include it with require('twbs-alert'). Is this how you would do it or doesn't it really matter to split the components because the unused components would be removed anyway during the minification process ?

Edit

Since v4 of bootstrap is written completely in es6 the shim approach will be obsolete since you can import the modules via the import statement

The unused components would not be removed during the minification process, so your approach is a good one.

The best analog to your question is how people try to avoid importing unused components from Lodash/Underscore. This does not work out of the box during minification. If you're using Babel there is a plugin that achieves the desired result for those libraries.

One option for you would be to write your own similar Babel plugin for Bootstrap.