Here, we will replace the Bootstrap plugins in our plugins.js
file with only the specific Bootstrap plugins we need. Then, we'll compress the file.
js/plugins.js
.bootstrap.min.js
.js/bootstrap
folder, recall that we've kept the Bootstrap plugins as distinct files. Open each of the following three plugins and copy and paste the code from each into our plugins.js
file. These are the only Bootstrap plugins we're using for this design:carousel
.js
collapse
.js
transition.js
plugins.js
file. Refresh your browser and test it:If these things are working, we've got the JavaScript we need.
plugins.js
file. A few free and convenient online tools include the following:With these tools, you can copy the contents of plugins.js
, paste it into the online interface, run the compressor, and copy the code back into plugins.js
.
For this exercise, I used CodeKit, a premium app for Mac (http://incident57.com/codekit/).
I've kept copies of my files as follows:
plugins-all.js
contains the entire bootstrap.min.js
plugins-uncompressed.js
contains just the three needed plugins, uncompressedplugins.js
is the final file, minified and concatenatedYou can see the results in this screenshot:
The final file is less than one-third the size of the original!