Esbuild improves compilation speed by 10 times

background

Our team’s small program project is built and compiled in gulp and developed in typescript, which has the advantages of better type checking and derivation, so it needs to build and compile in real time. Under normal circumstances, the compile speed is around 800~900ms per compilation, but as the project grows larger, the compile speed becomes slower and can take 2 ~3s, making it uncomfortable for developers to wait for long compilations.

So I’m thinking how can I speed up compilation? Vite is the French word for ‘light’, and it is fast because it relies on esbuild pre-build. Esbuild is written using Go and is 10-100 times faster than the pre-built dependencies of the packager written in Node.js.

Next, let’s look at esbuild and build compilation using EsBulid

esbuild

What is a esbuild

Esbuild is a new generation of extremely fast JavaScript packaging tools

Esbuild is known for being fast, taking only 2% to 3% of webPack’s time, and its main goal is to usher in a new era of build tool performance and create a modern packer that is easy to use

Main features:

• Extreme speed without needing a cache
• ES6 and CommonJS modules
• Tree shaking of ES6 modules
• An API for JavaScript and Go
• TypeScript and JSX syntax
• Source maps
• Minification
• Plugins

Why is Esbuild so fast

Summary why esbuild so fast? (The following content is translated from esBuild website)

• It is written in the Go language and can be compiled into native code
• Parallelism is used extensively, and parsing and code generation are all completely parallel
• The code is self-written, with no third party dependencies
• Efficient for memory

Here I just briefly summarize a few points, interested students can refer to the official documents to understand

Build using esBuild

First install based onesbuildThe development ofgulp-esbuildThe plug-in

npm install gulp-esbuild
Copy the code

Then, in thegulpfile.jsWriting a build task

const { src, dest } = require('gulp')
const gulpEsbuild = require('gulp-esbuild')

function esbuild() {
  return src('./src/**/*.ts')
    .pipe(gulpEsbuild({
        outfile: The '*'.loader: {
           '.ts': 'ts',},format: 'cjs'.tsconfig: '.. /tsconfig.json',
    }))
    .pipe(dest('./dist'))}exports.compile = compile
Copy the code

Next, compare the previous onesgulp-typescriptandesbuildBuild typescript

const typescript = require('gulp-typescript');
const tsProject = typescript.createProject('tsconfig.json');

function ts() {
  return src('./src/**/*.ts')
    .pipe(tsProject())
    .pipe(dest('./dist/'));
}

exports.compile = compile
Copy the code

We simply took four sets of compilation speeds to compare, and you can see thatesbuildWin, and compile faster than beforeTen timesI can’t believe it! 😆 😆

conclusion

In terms of compilation performance, esBuild beats all the packaging frameworks in the world by a hundredfold. Esbuild is surprisingly fast, and promises to improve build performance. However, esbuild cannot replace WebPack now or in the future, because it has a mature and strong ecosystem that favors developers.

Overall, Esbuild provides a new approach to design that is worth learning.