Webpack vs Browersify vs Systemjs for SPAs

Https://engineering.velocityapp.com/webpack-vs-browersify-vs-systemjs-for-spas-95b349a41fa0

Right now, there is at least 8 powerful open source Javascript bundlers; A few years ago there were only a couple. In building a large application at Velocity, I ultimately decided to review the following three build Systems:webpack, B Rowserify, Systemjs. After analysing the three, I ultimately switched bundlers and it had saved us days of development time.

A Brief Comparison

A typical bundler would import application source code and it ' s dependencies through an entry point. This entry point allows us to import is the relevant files and included dependencies into our final bundle and Concatena Te and minify them to make them available to use in the browser. Each bundler does this differently, but the the end all become a single JavaScript file or group of files to serve when neces Sary. In the following review, I considered the "the speed of the" Watch task (compiling the application on the fly after changing the Code), the ease of setup/configuration, size of the bundle, the flexibility of the builder to customise the environment E TC, and time it takes to build. Keep in mind, the build times of these bundlers vary significantly in configuration and project size.

Browserify

Browserify is perhaps the simplest bundler because it uses NodeJS require syntax to import JavaScript. It does not deal with any other assets and other than pure JavaScript modules. You can also bundle your Typescript/es6 app with Browserify plugins. However, you'll definitely need to add a task manager like Gulp or grunt for a production ready application as you ll want To also hash or bundle file, add environments, Regex replaces, further minification and asset management. Below is a simple Browserify Gulp task This takes in a set of browserify settings and entry point and outputs a bundle.js File. Gulp handles where the files go:

While parts of the gulp task was convoluted, the browserify part of the configuration was only a couple of lines. In comparison to the others, I would use browserify for javascript/typescript projects that does not require a lot of asset Management and aren ' t really complicated or large.

In review:

The speed of browserify:

• Building for Production:i ' d say browserify are almost on par with Webpack and SYSTEMJS. However, it only bundles code, not assets. Also, the transforms can really slow down the builds.
• Watching?—? Browserify out of the box does isn't watch well, it's very slow. You need to add watchify to incrementally watch your code changes. If you had any transforms the still at least JTG 5–6 seconds for a large application. You can configure Hot module reloading (the loading of a small module or part of your code, instead of the entire code), b UT there aren ' t many examples how to get the best out of this, nor are it widely used or integrated into the core like WEBP Ack.
• Verdict: good for pure Javascript applications, not Typescript or any apps that require a transforms.

Setup:

Browserify is by far the simplest setup in comparison to Systemjs or Webpack. There is still a bit of magic in this everything seems to function like NodeJs, but otherwise it does the job a bundler is Supposed to do.

Verdict:easiest to Setup

Bundle Size:

Browserify offers no built-in tree shaking or minification plugins, thus it ' s bundle is quite large and you'll need to use Plugins or write a lot of gulp tasks.

Verdict:large bundle, but plain JavaScript, you'll have the to figure it out yourself.

Flexibility:

The flexibility and customisability of browserify are almost as good as Webpack, in the. The plugins and Easy integration W ITH task managers, but the lack of asset management and the poor performance of plugins really make it difficult to Levera GE the power of the build system.

Verdit:good, but not top dog.

Systemjs

Like Browserify, SYSTEMJS uses the Require syntax, but it's more compatible with other times of files. On GitHub, it calls itself the ' universal loader ', in that it loads ES6 modules, AMD, CommonJS and global scripts in the B Rowser and NodeJS. Meaning, it had a lot more built-in support for including different types of files than Webpack or browserify. However, this comes at a cost. You have to directly tell Systemjs where to look for it dependencies and you end up with a config file like so:

Above is an Angular 2 Systemjs example. Including all your dependencies one by one are not ideal for large application, thus I recommend so you ' d only want to us e Systemjs for smaller, the more diverse projects and save yourself sometime does have to write out the this configuration.

In Review:

The speed of SYSTEMJS:

• Builds?—? Despite have to being able to load in any module type, Systemjs are surprisingly fast for production builds because it does One job very well. I ' d say it ' s faster than browserify a lot of the time.
• Watching?—? For watching, it is also quite snappy and no magic happens under the hood. In some cases it's faster than browserify for large applications. You can also configure relevant hot module reloading with SYSTEMJS as well, which was awesome and there are lots of Angular 2 examples online on how to does this.

Verdict:fast, but not the fastest.

Setup:

The setup is probably the most tedious and also maintaining the SYSTEMJS config is also quite difficult ually add dependencies and make sure your file paths don ' t change.

Verdict:simple, yet tedious and manual.

Bundle Size:

Systemjs seems less mysterious when bundling and the size isn ' t really different than browserify because there is few to No additional add-ons that can does ' magical ' things for you.

Verdict:like browserify, know your minification and tree-shaking Gulp/node plugins.

Flexibility:

SYSTEMJS is not as flexible or customisable as browserify or Webpack.

Verdict:do everything separately with Gulp.

Webpack

Webpack treats everything as a module. Your CSS, HTML, JavaScript, fonts, images. Anything and everything can be inlined to your code if you desire. In addition to making everything a module, it also allows to you specify how do you load these modules with ' loaders ' and bun Dle them together into your bundle or index.html. Because Webpack can bundle your entire app together, it makes tree shaking and optimising your code easy. Below, is a example from the Webpack Angular 2 starter. The Angular team has also recently switched to Webpack from Systemjs in their angular-cli. Below, is a sample webpack configuration file:

In Review:

The speed of Webpack:

• Builds?—? Webpack ' s build time directly depends on the configuration, but out of the box it is really fast, despite also including H Tml and styles into the bundling process.
• Watching?—? For watching, it is also quite snappy. Many misconfigure Webpack to run production build during its watches, thus it's important to read the documentation and M Ake sure to only use webpack.optimize for production builds, not development. You can also configure relevant hot module reloading and with React you can hot reload your state?—? keeping the state of Y Our application as your develop, which is awesome!

Verdict:fast, configurable, and ready for the production use.

Setup:

The First-time setup is a difficult to grasp with a terms like ' loaders ', but after understanding such and how the bundling W Orks, setting up and other Webpack projects are easy. You won ' t even need gulp. Just bundle everything with webpack and some NPM commands. In the end, you'll end up writing less code than gulp or any other bundler.

Verdict:hard to understand at first, but well worth it.

Bundle Size:

Because of Webpack ' s built-in optimisation plugins it does an amazing job and getting rid of unused code and tree shaking.

Verdict:the best for production builds as it has built-in de-duping, uglifying, and tree-shaking (2.0).

Flexibility:

Webpack is one of the most flexible bundlers because there be loaders pretty much for anything?—? so can shim or inclu De any of the type of file you want. It's more flexible than browersify in so can decide more entry points and support different types of assets.

Verdict:the most flexible and powerful of the 3, but again learning how each part of it works was hard.

Conclusioni recommend using Webpack 1 for bundling large Web applications.

Webpack is also my first choice for single page Web applications. At Velocity, we switched from browserify to Webpack and reduced our bundles size by 10–20%, watch times by seconds, and Bui lds by minutes. Also we ' ve reduced the number of gulp tasks in our builds and decreased the complexity.

Overall, Webpack is the clear winner when it comes to speed and flexibility. Webpack 2 offers more features and performance outside of the box, it's in beta and isn't ready for production as some of T He sourcemapping for scss are broken and not all loaders support it.

Browserify is good for quick small applications. Systemjs is great for small to medium sized applications, that rely on a variety of different dependencies. However, with Webpack you can support all of the what SYSTEMJS or browserify support with external loaders.

Share your thoughts on my comparison and code samples. Also, if you know any speed or improvements that I can do to my examples, please let me know. Also below, I listed some other bundlers you could want to take a look at.

Cheers,

Evan Gillogley

Web Developer at Velocity

Other great bundlers:

Rollup (great tree shaking, primarily used for ES6)

Lasso?—? made by EBay?—? influenced by browserify and bundles all the assets.

JSPM?—? Like SYSTEMJS with NPM integration.

For more bundlers, check out the This page.

Webpack vs Browersify vs Systemjs for SPAs