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