Esbuild introduction

What is Esbuild

ESbuild is a WebPack-like build tool. It builds dozens of times faster than WebPack.

Why so fast?

  1. Js is single-threaded serial, esbuild is a new process, and then multi-threaded parallel, give full play to the advantages of multi-core
  2. Go is pure machine code and is definitely faster than JIT
  3. No AST is used, optimizing the build process. (It also brings some disadvantages, more on that later)

How to use ESbuild

ESbulid file: esbuild.github. IO/API /

Esbuild can be used in command line, JS call, and go call. Here is mainly about the use of JS call.

Compile code with esBuild

Esbuild provides writeFileSync/writeFile to compile code. Demo is as follows

require('fs').writeFileSync('in.ts'.'let x: number = 1')
require('esbuild').buildSync({
  entryPoints: ['in.ts'].outfile: 'out.js',})Copy the code

Use ESBuild to process JSX code

require('esbuild').transformSync('<div/>', {
  jsxFactory: 'h'.// The default value is react. CreateElement, which is customizable. If you want to use Vue JSX, change this value to Vue.CreateElement
  loader: 'jsx'.// Set loader to JSX to compile JSX code
})

React.Fragment (default); Vue.Fragment (default);
require('esbuild').transformSync('<>x</>', {
  jsxFragment: 'Fragment'.loader: 'jsx',})Copy the code

Use esbuild to compress code volume

Esbuild provides a Minify configuration that allows the user to compress the code volume, as shown in the actual demo below

var js = 'fn = obj => { return obj.x }'
require('esbuild').transformSync(js, {
  minify: true,})After the / / minify
{
  code: 'fn=n=>n.x; \n'.map: ' '.warnings: []}Copy the code

Working with other resources

Unlike WebPack, esBuild has some built-in loaders for file handling. When esBuild resolves a suffix, the Loader is automatically used to process it. Of course, you can also manually specify the corresponding loader processor, if you want to use JSX Loader to handle JS files. This can be configured as an example.

Now Esbuild built-in js, JSX, ts, the TSX, CSS, text, binary, dataurl, the file type of loader

require('esbuild').buildSync({
  entryPoints: ['app.js'].bundle: true.loader: { '.js': 'jsx' }, // The default js loader is jsx-loader
  outfile: 'out.js',})Copy the code

Start a Web Server with esbuild for debugging (hot update support)

require('esbuild').serve({}, {
  entryPoints: ['app.js'].bundle: true.outfile: 'out.js',
}).then(server= > {
  // Call "stop" on the web server when you're done
  server.stop()
})
Copy the code

Use esbuild in Webpack

Using the ESbuild agent Webpack directly is not practical in the current front-end environment. The current mainstream solution is to use esbuild in Webpack to do some code transform (instead of babel-loader).

Webpack build process

Let’s start with the WebPack build process:Aotu. IO/notes / 2020 /… The construction process of Webpack is simply to compile each module file recursively and use different Webpack Loaders for different types of files. What we need to do is replace the webpack code conversion step (babel-loader, TS-loader) with esbuild-loader.

esbuild-loader

Esbuild-loader is one such tool. Here’s how to use esbuild-loader.

First you need to reference the esbuild-plugin in your plugin. Mount esBuild related methods in webpackYou can then configure the webPack configuration normally. Here’s what you can do with it

  • Use esbuild instead of babel-loader (same with TS-loader) for code degradation

  • Use esbuild instead of TS-Loader to handle TS code

  • Esbuild-loader can also be used for Minify code

The disadvantage of esbuild

Esbuild isn’t perfect either (if it is, why hasn’t it been widely used?). To ensure efficient compilation of esbuilds, esBuilds do not provide AST operation capabilities. So some babel-plugins that process code through the AST don’t have a good way to transition into esbuild. So, if your project uses babel-plugin-import, or some custom babel-plugin. At present, there is no good migration scheme.

Availability of ESbuild in production environment

Conclusion first, using ESbuild in a production environment is feasible. Build tools like Snowpack and Vite already use EsBuild as a code handling tool (stability enough). If you must use it, check to see if it meets the following criteria

  1. Not using some custom babel-plugin (e.g., babel-plugin-import)
  2. No need to be compatible with older browsers (esbuild can only convert code to ES6)

Don’t be afraid to use esbuild-Loader to improve your projects

Mention effect results

You can see the improvement after upgrading esbuild. In the cold start phase, the packing speed can be optimized to 70% and in the cache phase, the speed can be optimized to 50%