When I initially built this site, I incorporated Bootstrap’s JavaScript via a CDN. Recently, I audited the JavaScript functionality that the site uses and built the production bundle from source instead.
When choosing a bundler I decided on Parcel, which is a modern zero-configuration tool with less overhead, more features, and better usability than most other bundlers out there.
I’ll outline the few simple steps that are needed to use Parcel for bundling Bootstrap’s JavaScript, in case anyone else might be interested.
Installing Bootstrap & Popper
The source files for Bootstrap’s JavaScript (and CSS for that matter) are included in their NPM package. However for JavaScript compilation, the Popper JS library also needs to be installed as a peer dependency.
Using NPM, this can be done in your project’s root with the following commands:
npm install bootstrap
npm install @popperjs/core
Installing Parcel
Parcel can also be installed via NPM with the following command:
npm install -g parcel-bundler
Parcel is installed globally, which isn’t uncommon for most bundlers. If for some reason you cannot install global NPM packages, add it locally instead with
npm install parcel-bundler --save-dev
.
Parcel CLI Usage
Parcel’s command line syntax is similar to other bundlers and minifiers. On a basic level, it takes an input file as an argument and builds to an output file that is used for production.
Here’s the basic syntax for Parcel’s command line usage:
parcel build parcel.js --out-dir js --out-file bootstrap.js --experimental-scope-hoisting
The command can be broken down as follows:
parcel
calls the CLI binaryparcel.js
is the entrypoint (can be any filename;index.js
is commonly used as well)bootstrap.js
is the compiled output (that you’ll reference in your HTML; can be any filename)--experimental-scope-hoisting
tells Parcel to do tree shaking and static referencing to reduce the total size of the compiled bundle, and increase performance
Importing Bootstrap Plugins
Bootstrap offers individual plugin files that can be imported for some or all of its JavaScript-related functionality.
Bootstrap’s documentation on using Parcel covers the different ways of importing one or more plugins in depth.
Based on the Bootstrap features I use, here are the contents of parcel.js
for my own website as a quick example:
import { Button as Button } from './node_modules/bootstrap/js/src/button';
import { Offcanvas as Offcanvas } from './node_modules/bootstrap/js/src/offcanvas';
import { Collapse as Collapse } from './node_modules/bootstrap/js/src/collapse';
import { Dropdown as Dropdown } from './node_modules/bootstrap/js/src/dropdown';
NPM Script Usage
It’s a good idea to add the Parcel build
command to your package.json
file as an NPM script:
"parcel": "parcel build parcel.js --out-dir js --out-file bootstrap.js --experimental-scope-hoisting"
The build command can then be run with npm run parcel
, or using the NPM scripts toolbar in VS Code. When run, Parcel will import, build, optimize, and output your JavaScript bundle file.
Adding JavaScript Bundle to HTML
The final step is to add the link to the bundled JavaScript file into your HTML. I always put Bootstrap’s JavaScript in the footer for ideal page-loading performance, and here’s the markup from my own website as an example:
<script type="text/javascript" src="../js/bootstrap.js"></script>
When compiled, the resulting JavaScript bundle is around
43KB
and is further reduced to around15KB
when delivered with Brotli compression. Not bad at all.
Using Parcel to selectively bundle Bootstrap’s JavaScript results in a smaller JavaScript file that will not only contain the scripts your site actually uses, but will reduce the loading time of your website altogether.
Links
- Parcel - https://parceljs.org
- Bootstrap - https://getbootstrap.com