CODEWITHSUNDEEP
htmlperformancetwitter-bootstraptwitter-bootstrap-3
shmuli
shmuli

Reputation: 5192

Separately loading in Bootstrap components

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

Upvotes: 7

Views: 3974

Answers (3)

Bass Jobsen
Bass Jobsen

Reputation: 49044

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).

Upvotes: 0

Christina
Christina

Reputation: 34652

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

Upvotes: 6

Slawa Eremin
Slawa Eremin

Reputation: 5415

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?

Upvotes: 1

Related Questions