The next time we build we'll have Create React App running using esbuild-loader without having ejected. We're going to use CRACO, so we'll add esbuild-loader and CRACO as dependencies:Ĭonst option set (to ensure we can process JSX/TSX).įinally we'll swap out using Terser for JavaScript minification for esbuild as well. It describes itself this way:Ĭreate React App Configuration Override is an easy and comprehensible configuration layer for create-react-app. An alternative is to use a tool like CRACO which allows us to tweak configuration in place. Doing so is fine, but it means you can't keep track with CRA's evolution.
#WHY USE WEBPACK NOT JUST BABEL CODE#
One way to customise a Create React App build is by running npm run eject and then customising the code that CRA pumps out. The question now is, what will happen if we drop esbuild into the mix? CRACO Our complete build, TypeScript type checking, transpilation, minification and so on, all took 22.08 seconds. We'll run time npm run build to execute a build of our simple app: So we can understand the advantage of moving to esbuild, we first need a baseline to understand what performance looks like with babel-loader. So it's tremendous we still have that plugin in place as otherwise we would lose type checking. This is very useful, as esbuild just does transpilation and does not intend to provide type checking support. It's worth knowing that Create React App uses babel-loader behind the scenes.ĬRA also uses the fork-ts-checker-webpack-plugin to provide TypeScript type checking. This will scaffold out a new React application using TypeScript in the my-app directory. Npx create-react-app my-app -template typescript It's very straightforward to migrate a project which uses either babel-loader or ts-loader to esbuild-loader. Migrating an existing project to esbuild This post will look at using esbuild-loader in your webpack setup. As such esbuild-loader represents a middle ground and an early way to get access to the increased build speed that esbuild offers without saying goodbye to webpack. Whilst esbuild may not work for all use cases, it will for the majority. As Node.js-based projects, ts-loader and babel-loader will never be able to compete with esbuild-loader in the same way. However, I feel strongly that the important thing here is developer productivity. To declare an interest here, I'm the primary maintainer of ts-loader a popular TypeScript loader that is commonly used with webpack. It allows users to swap out ts-loader or babel-loader with itself, and massively improve build speeds. It's a webpack loader built on top of esbuild. There’s a relatively new project named esbuild-loader developed by hiroki osame.
So if you’re a team that wants to have faster builds, but doesn’t have the time to go through a big migration. It's battle tested on large projects it's mature and it handles many use cases.
It does a lot of things very well indeed.
New projects might start with Vite, but existing ones are less likely to be ported. Migrating to a new build tool is no small piece of work. There’s a lot of projects out there that are already heavily invested in their current build tooling. In the long term, the likes of esbuild, Vite and friends may well come to displace the current standard build tools. These new tools are transformative and represent a likely future of build tooling for the web. If you'd like to read about esbuild directly there's a great post about it. This translates into significantly faster builds. Go and Rust enjoy far greater performance than JavaScript. The significant difference between these and their predecessors is that they are written in languages like Go and Rust.
The new kids on the blog are tools like esbuild, Vite and swc. These tools are written in the same language they compile to JavaScript (or TypeScript). It's long been common practice to run your JavaScript and TypeScript through some kind of Node.js based build tool, like webpack or rollup.js. With apologies to those suffering from JavaScript fatigue, once again the world of web development is evolving. This post takes us through using esbuild alongside webpack using esbuild-loader. However, if you're invested in webpack but would still like to take advantage of speedier builds, there is a way. Builds can be made faster using tools like esbuild.
0 kommentar(er)
