7

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"?

BenMorel
  • 34,448
  • 50
  • 182
  • 322
shmuli
  • 5,086
  • 4
  • 32
  • 64
  • 1
    The point of using bootstrap is to benefit from the library and get updates. You are taking all of the work in the future onto yourself/your team... – DrCord Dec 18 '13 at 22:00

3 Answers3

6

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

Christina
  • 34,296
  • 17
  • 83
  • 119
  • Just commenting out the components and recompiling won't bring down the file size though. Could you please explain what you mean? – shmuli Dec 18 '13 at 20:39
  • If you open up the bootstrap.less file and comment out // - two forward slashes is a silent comment and they don't get compiled and the size of the resulting CSS is massively affected. This is a single line commment in less // – Christina Dec 18 '13 at 20:48
  • That's interesting. If I comment out a line, it doesn't get compiled and it reduces the size of the file. Hmmm... – shmuli Dec 18 '13 at 20:49
  • Ah, I see now! That makes a lot of sense. – shmuli Dec 18 '13 at 20:57
  • @cab i wonder why you say the size for javascript doesn't matter but for CSS it does. I think you should consider and handle both in the same way. – Bass Jobsen Dec 18 '13 at 21:13
  • 2
    I didn't write that the js size didn't matter, I wrote that the minified bootstrap is really small 27k and once it's cached, it doesn't matter since it's cached. Even though I don't use two or three things from bootstrap, the 4k difference of not loading modals and a couple other things really don't see much benefit versus the time of grabbing the individual files and compiling them myself. – Christina Dec 18 '13 at 21:19
1

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?

Community
  • 1
  • 1
Slawa Eremin
  • 5,264
  • 18
  • 28
0

In the first place not loading what you don't use will always the best option. As mentioned by @cab in general reduce http(s) requests should give faster loading.

Bootstrap has a modular structure and the idea behind is you only have to load (or compile) what you need. Compiling your own copy of bootstrap will be relative easy. The result will be one javascript file and one css, both containing the components you need.

Bootstrap's customizer (http://getbootstrap.com/customize/) will be the easiest way to compile your own copy, you can select the component Javascript / CSS you will need, and download your copy.

Second option is to download the source from github and compile this. I use grunt mostly to do this Bootstrap refers to http://bower.io/ to do this. Before compiling comment out what you don't need. For CSS you can do this in less/bootstrap.less and for javascript in Gruntfile.js (around line 73).

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224