Webpack + ES Build

What’s Webpack?

A module bundler that packages all our app assets into a production-ready bundle. Webpack does this by bundling all our app’s scripts into one file. And as a result, it minimizes HTTP requests and speeds up the site’s performance.

What’s Babel?

Transform JSX code or latest JavaScript into browser-friendly vanilla JavaScript.

What’s ES Build?

A fast, modern JavaScript bundler and minifier. it’s a lightweight and efficient tool for compiling and optimizing JavaScript code for the web.

Why is ES Build faster?

ES Build is faster than other bundlers for the following reasons:

1. Native code generation:

ES Build is written in C++ and generates native code directly, which is significantly faster than executing JavaScript code.

2. Go language usage:

ES Build is built using the Go language, which offers excellent performance and concurrency capabilities. Go provides similar performance to C while being easier to develop and use.

3. Parallel processing optimization:

ES Build parallelizes the compilation process across multiple threads, greatly improving bundling speed. This is especially effective for large-scale projects.

4. Memory usage optimization:

ES Build optimizes memory usage, allowing it to run with less memory than other bundlers. This is particularly important on systems with limited memory capacity.

5. Use of a custom JavaScript parser:

ES Build uses its own JavaScript parser, eliminating the dependency on external libraries like Babel. This makes the bundling process more efficient and further improves speed.

How to use?

1.설치

yarn add esbuild-loader

or 

npm i -D esbuild-loader

2.Webpack config 설정 변경 (JS & JSX)

module.exports = {
    module: {
      rules: [
-       {
-         test: /\\.js$/,
-         use: 'babel-loader',
-       },
+       {
+         test: /\\.js$/,
+         loader: 'esbuild-loader',
+         options: {
+           loader: 'jsx',  // Remove this if you're not using JSX
+           target: 'es2015'  // Syntax to compile to (see options below for possible values)
+         }
+       },
        ...
      ],
    },
  
}

3.Minification Settings

What is Minification?
Minification is a technique that optimizes JavaScript, CSS, and HTML code to improve web page loading speed.

How dose Minification Work?
Removes unnecessary spaces, comments, and line breaks.
Shortens variable and function names.
Performs other optimizations that can make the code more efficient.

+ const { ESBuildMinifyPlugin } = require('esbuild-loader')

  module.exports = {
    ...,

    optimization: {
      minimizer: [
+       new ESBuildMinifyPlugin({
+         target: 'es2015'  // Syntax to compile to (see options below for possible values)
+         css: true  // optimize-css-assets-webpack-plugin 대체
+       })
      ]
    
},

💡 참고 링크 [https://tech.osci.kr/환상적인-케미-webpack-esbuild/](https://tech.osci.kr/%ED%99%98%EC%83%81%EC%A0%81%EC%9D%B8-%EC%BC%80%EB%AF%B8-webpack-esbuild/) https://medium.com/@karanatsios.n/introduction-to-esbuild-9ca368fb4253 https://medium.com/sessionstack-blog/how-javascript-works-a-deep-dive-into-webpack-cbc9c169eed7 ㅇ