Webpacker VS esbuild

We will use Webpacker or JavaScript compiler and assets management. By following the webpacker installation guide, let’s add Webpacker and React to our application.

For example, there is a Ruby on Rails application that uses Webpacker and has JavaScript files that are covered by the system tests. Capybara is used as the system testing tool.

This is done through the Webpacker::DevServerProxy which is a rack middleware that is added by Webpacker.

Using Webpacker in Rails provides several advantages over the traditional asset pipeline. First, Webpacker uses JavaScript modules, which allows for better code organization and improved code reusability. Second, it offers modern frontend build tools, such as Babel and PostCSS, for transforming and compiling assets. Third, it provides faster build times and faster runtime performance through code splitting and lazy loading. Fourth, it offers better integration with JavaScript frameworks such as React, Vue, and Angular. Overall, Webpacker offers a more flexible and modern asset management solution for Rails applications. And while Webpacker is being retired, this initiative is to consolidate our code accordingly before moving our bundler to another solution.

This article is replace Webpacker with Simpacker and webpack.

in ruby ​​on rails 7 what is the best way to properly install Angular because I can't find any documentation about it. The only tutorial that exists uses webpacker (https://github.com/rails/webpacker) but unfortunately it is no longer supported and no longer up to date in terms of security.

From the webpacker gem:

Check this: https://github.com/rails/webpacker/issues/2825

instead of using webpacker you should move to esbuild or importmap. Webpacker has been retired a few months ago (cf https://github.com/rails/webpacker) There are videos explained how to set this up (e.g. for importmap https://learnetto.com/tutorials/how-to-use-react-with-rails-7

Using a more raw toolchain is also a good way to speed things up; the SWC website shows it to be 20 to 70 times faster than Babel, and there are tons of speed advantages in complex real-world applications, which proves that rawness can be a big help in speeding things up. Instead of vite-plugin-react, you can use @vitejs/plugin-react-swc, with LightningCSS instead of PostCSS, SWC or esbuild instead of Babel, etc. etc. to achieve better performance.

Babel with 49,577,061 npm downloads per week, is the most used tool for JavaScript transformation, we looked at Esbuild as a replacement but many functionalities, most notably loadable support, are missing. Another alternative SWC, written in Rust, supports all the necessary functionalities we need, and on top of that it has APIs similar to Babel, making migration much smoother than other alternatives:

Added a plugin to exclude vendor sourcemaps from the scripts (big reduction) exclude node_modules from source map Issue #1685 · evanw/esbuild · GitHub

You have to use a bundler such as esbuild which will compile your project and bundle all of it's dependencies along with it so they aren't imported. This bypasses the ESM/CommonJS incompatibility issue.

However, when you want to productionize your JS library, you need to bundle it. Otherwise, you will ship all the node_modules. Is used esbuild because it is able to bundle to CJS and ESM. Now, let's run the same benchmark with the bundled version.

Are you familiar with Java?

If so, a web bundler is like a build tool which creates a single fat jar from all your source code and dependencies, so all you have to "deploy" is a single file... except the fat jar is just a (usually minified) js file (and sometimes other resources like a css output file that is the "bundled" version of multiple input CSS files, and other formats that "compile" to CSS, like SCSS [1] which used to be common because CSS lacked lots of features, like variables for example, but today is not as much needed).

Without a bundler, when you write your application in multiple JS files that use npm dependencies (99.9% of web developers), how do you get the HTML to include links to everything? It's a bit tricky to do by hand, so you get a bundler to take one or more "entry points" and then anything that it refers to gets "bundled" together in a single output file that gets minified and "tree-shaken" (dead code elimination, i.e if you don't use some functions of a lib you imported, those functions are removed from the output).

Bundlers also process the JS code to replace stuff like CommonJS module imports/exports with ESM (the now standard module system that browsers support) and may even translate usages of newer features to code that uses old, less convenient APIs (so that your code runs in older browsers).

I've been learning a lot about this because I am writing a project that is built on top of esbuild[2], a web bundler written in Go (I believe Vite uses it, and Vite is included in the benchmarks in this post). It's extremely fast, so fast I don't know why bother writing something in Rust to go even faster, I get all my code compiled in a few milliseconds with esbuild!

Hope that helps.

[1] https://sass-lang.com/documentation/syntax/

[2] https://esbuild.github.io/

Indeed!

They probably took the idea from https://esbuild.github.io

Go has the benefit of not having to reach a distributed consensus amongst a handful of individual browser vendors. Try compiling a large Go project with tinygo to get a glimpse of that experience [1]. If the browser vendors had been able to ship ES4 or ES5 with module support between 1999 and 2009, Node probably would have implemented it and there would be no dichotomy between CJS and ESM.

[1] https://github.com/evanw/esbuild/issues/1111

Vite is not a bundler but a frontend tool that intelligently uses ESBuild and Rollup for their best use cases.

esbuild 0.21 is out! (https://github.com/evanw/esbuild/releases/tag/v0.21.0) by Evan Wallace Decorators for the win.