Separately loading in Bootstrap components

Question

I'm working on a large web project that involves many developers, and I would like to slim down a package of Bootstrap3 and keep only what we're using. Basically, the idea is to cut out any extra overhead when the page loads in the browser.

So there are 2 ways I can go about doing this:

I can either...

a.) remove any extra parts from the library, create a new build, and then load that into our project.

For example:

<!-- Custom build of a slimmed down Bootstrap -->
<script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Or...

b.) modularize the entire Bootstrap3, separate each component into its own file, and write the entire build into the html, while commenting out the things we don't need.

For example:

<!-- All Bootstrap components-->
<script src="/bootstrap/3.0.3/js/glyphicons_bootstrap.min.js"></script>
<script src="/bootstrap/3.0.3/js/buttongroups.min.js"></script>
<script src="/bootstrap/3.0.3/js/inputgroups_bootstrap.min.js"></script>
<!-- <script src="/bootstrap/3.0.3/js/navs_bootstrap.min.js"></script> DON'T NEED THIS -->
<script src="/bootstrap/3.0.3/js/navbars_bootstrap.min.js"></script>
<!-- <script src="/bootstrap/3.0.3/js/breadcrumbs_bootstrap.min.js"></script> DON'T NEED THIS -->
<script src="/bootstrap/3.0.3/js/pagination_bootstrap.min.js"></script>

etc...

The advantage of using the second option would be that it would give the other developers more control of the bootstrap components that we're loading into the project, without having to go and rebuild it again. If in any event in the future they need to load some new Bootstrap components, they can just uncomment that line of code. That would make this more flexible for other developers to use, and it wouldn't restrain them from developing further throughout the project using Bootstrap.

What are some thoughts about this however? Would pulling more files into the project (as opposed to pulling in one large file) increase the overhead at loading time? Is this against "good/best practice"?

Answer 1

If you go to the https://github.com/twbs/bootstrap/tree/master/js all the js is separated out in the js folder. The dist folder has the compiled files.

However, one file is less http requests and faster loading. The bootstrap.min.js file is small. Plus once it's cached by the browser you don't need to worry about loading.

Fewer files, faster loading because there are fewer http requests. And for that matter, you can use Bootstrap's CDN for their js and their respond.js.

It's the CSS that needs slimming down if you don't use certain components. I never use their navbar (two levels only), modal (no images, iframes etc), and other things, so I don't use those things. I use the buttons, grid, panels, and other stuff. I use LESS and CodeKit. Just // comment out the components you are not using and recompile. that's where you'll see the biggest gains in slimming it down.

In bootstrap.less if you do this:

//@import "bootstrap/popovers.less";
//@import "bootstrap/component-animations.less";

Then all the resulting CSS won't be part of the final bootstrap.css file

Answer 2

The first way is better to use in production, the second is better when you develop your site

Below you can find a good list of minification tools for you, that help you to combine js files automatically.

Is there a good JavaScript minifier?