JS Build Recipes

Configuring the build system for JS projects is a pain in the ass!

This is a simple collection of config & build system recipes for bootstrapping (bare-bones versions) of popular frameworks.

It currently only supports rollup, webpack & a small handful of libraries, but will be adding more over time (feel free to submit pull-requests for additional libraries or build systems).

Purpose

The primary purpose is to make bootstrapping a new project much faster & easier with a baseline config to start with.

The secondary purpose is to compare various libraries and build tools based on a few criteria:

  1. How simple is it to setup and configure? Can it be done in a few lines of code? Hundreds? How many config files are reasonably required.
  2. What's is the output files size?
  3. What is the average build time.
  4. What is the average page load time.

To do this, each framework has a very basic "hello world" style app with lives in the /client folder, and outputs "hello" and the name of the framework in an <h1> tag. This lets us compare apps against what is quite literally the simplest page possible.

Where supported, each app will use an html template file (or equivalent) for the content it will output.

None of the apps are utilizing any imports beyond what is required by the library (for example, there are no utility functions such as lodash being imported).

Try it out

Build all files

Run yarn build to build all frameworks with both Rollup and wWbpack. All files will be output to /_dist.

Rollup

To test things out locally, simply uncomment the line for the framework you want to use in rollup.config.js, and run yarn run-rollup to run a build & start the server (this will create the file _dist/app.min.js which is loaded by server/views/index.pug). Point your browser to http://localhost:3000.

If instead of starting a server, you just want to build all libraries and exit, simply run yarn rollup-all.

Webpack

To test things out locally, simply uncomment the line for the framework you want to use in webpack.config.js, and run yarn run-wp to run a build & start the server (this will create the file _dist/app.min.js which is loaded by server/views/index.pug). Point your browser to http://localhost:3000.

If instead of starting a server, you just want to build all libraries and exit, simply run yarn rollup-all.


Compare

Note: If you want to compare output size of all frameworks, you can simply run: $ yarn build

This will build all libraries and output them to _dist.

Rollup

Shared config lines: 57

Framework Build Size Config lines Client Files Config File Build time
Marko 17 KB 35 client/marko rollup/marko 1.86s
Preact* 36 KB 30 client/preact rollup/preact 1.27s
React 193 KB 35 client/react rollup/react 6.94s
Riot 25 KB 24 client/riot rollup/riot 2.43s
Svelte 2 KB 25 client/svelte rollup/svelte 1.43s
Vanilla JavaScript (ES2015) 201 B 21 client/vanilla rollup/vanilla 1.18s
Vue 91 KB 21 client/vue rollup/vue 3.64s

*Non-minified size. Currently breaks on uglify.

Webpack

Shared config lines: 60

Framework Build Size Config lines Client Files Config File Build time
Marko 17 KB 17 client/marko webpack/marko 2.03s
Preact 11 KB 24 client/preact webpack/preact 1.51s
React 219 KB 24 client/react webpack/react 5.13s
Riot 25 KB 21 client/riot webpack/riot 1.73s
Svelte 4 KB 17 client/svelte webpack/svelte 1.24s
Vanilla JavaScript (ES2015) 687 B 11 client/vanilla webpack/vanilla 1.10s
Vue 92 KB 11 client/vue webpack/vue 3.32s

Common

Libraries all share an additional "common" rollup or webpack file, and provides the following:

  • ES Lint
  • Babel
  • Resolve helper for commonjs & es2015 styles modules
  • Uglify
  • Provides NODE_ENV to files
  • In addition to plugins, it sets a few defaults:
    • Export format as IIFE
    • Export file as _dist/app.min.js
    • Default module name
    • Enables source maps

Top categories

Loading Svelte Themes