Switches to esbuild for faster build times

package.json

@@ -9096,12 +9096,13 @@
 		}
 	},
 	"scripts": {
-		"analyze:bundle": "webpack --env.analyzeBundle",
-		"analyze:deps": "webpack --env.analyzeDeps",
+		"analyze:bundle": "webpack --env analyzeBundle",
+		"analyze:deps": "webpack --env analyzeDeps",
 		"build": "webpack --mode development",
 		"build:extension": "webpack --mode development --config-name extension",
 		"build:webviews": "webpack --mode development --config-name webviews",
 		"bundle": "webpack --mode production",
+		"bundle:esbuild": "webpack --mode production --env esbuild",
 		"clean": "git clean -Xdf -e !node_modules -e !node_modules/**/*",
 		"lint": "eslint src/**/*.ts --fix --cache",
 		"pack": "vsce package --yarn",
@@ -9111,13 +9112,13 @@
 		"pub": "vsce publish --yarn",
 		"rebuild": "yarn run reset && yarn run build",
 		"reset": "yarn run clean && yarn --frozen-lockfile",
-		"watch": "webpack --watch --mode development",
+		"watch": "webpack --watch --mode development --env esbuild",
 		"watch:extension": "webpack --watch --mode development --config-name extension",
 		"watch:webviews": "webpack --watch --mode development --config-name webviews",
 		"update-dts": "pushd \"src/@types\" && npx vscode-dts dev && popd",
 		"update-dts:master": "pushd \"src/@types\" && npx vscode-dts master && popd",
 		"update-emoji": "node ./scripts/generateEmojiShortcodeMap.js",
-		"vscode:prepublish": "yarn run bundle"
+		"vscode:prepublish": "yarn run bundle:esbuild"
 	},
 	"dependencies": {
 		"@octokit/graphql": "4.5.9",
@@ -9143,6 +9144,7 @@
 		"copy-webpack-plugin": "7.0.0",
 		"csp-html-webpack-plugin": "5.1.0",
 		"css-loader": "5.0.1",
+		"esbuild-loader": "2.8.0",
 		"eslint": "7.19.0",
 		"eslint-cli": "1.1.1",
 		"eslint-config-prettier": "7.2.0",

webpack.config.js

@@ -1,6 +1,7 @@
 //@ts-check
 /** @typedef {import('webpack').Configuration} WebpackConfig **/
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
@@ -11,6 +12,7 @@ const { CleanWebpackPlugin: CleanPlugin } = require('clean-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const CspHtmlPlugin = require('csp-html-webpack-plugin');
+const { ESBuildPlugin, ESBuildMinifyPlugin } = require('esbuild-loader');
 const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlPlugin = require('html-webpack-plugin');
 const HtmlSkipAssetsPlugin = require('html-webpack-skip-assets-plugin').HtmlWebpackSkipAssetsPlugin;
@@ -67,7 +69,7 @@ class InlineChunkHtmlPlugin {
 
 module.exports =
 	/**
-	 * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; } | undefined } env
+	 * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; } | undefined } env
 	 * @param {{ mode: 'production' | 'development' | 'none' | undefined; }} argv
 	 * @returns { WebpackConfig[] }
 	 */
@@ -85,7 +87,7 @@ module.exports =
 
 /**
  * @param { 'production' | 'development' | 'none' } mode
- * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; }} env
+ * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; }} env
  * @returns { WebpackConfig }
  */
 function getExtensionConfig(mode, env) {
@@ -101,6 +103,10 @@ function getExtensionConfig(mode, env) {
 		}),
 	];
 
+	if (env.esbuild) {
+		plugins.push(new ESBuildPlugin());
+	}
+
 	if (env.analyzeDeps) {
 		plugins.push(
 			new CircularDependencyPlugin({
@@ -137,17 +143,25 @@ function getExtensionConfig(mode, env) {
 		},
 		optimization: {
 			minimizer: [
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore
-				new TerserPlugin({
-					parallel: true,
-					terserOptions: {
-						ecma: 2019,
-						// Keep the class names otherwise @log won't provide a useful name
-						keep_classnames: true,
-						module: true,
-					},
-				}),
+				env.esbuild
+					? new ESBuildMinifyPlugin({
+							format: 'cjs',
+							minify: true,
+							treeShaking: true,
+							// Keep the class names otherwise @log won't provide a useful name
+							keepNames: true,
+							target: 'es2019',
+					  })
+					: new TerserPlugin({
+							parallel: true,
+							terserOptions: {
+								ecma: 2019,
+								// Keep the class names otherwise @log won't provide a useful name
+								keep_classnames: true,
+								module: true,
+							},
+					  }),
 			],
 			splitChunks: {
 				cacheGroups: {
@@ -164,13 +178,22 @@ function getExtensionConfig(mode, env) {
 					exclude: /\.d\.ts$/,
 					include: path.join(__dirname, 'src'),
 					test: /\.tsx?$/,
-					use: {
-						loader: 'ts-loader',
-						options: {
-							experimentalWatchApi: true,
-							transpileOnly: true,
-						},
-					},
+					use: env.esbuild
+						? {
+								loader: 'esbuild-loader',
+								options: {
+									loader: 'ts',
+									target: 'es2019',
+									tsconfigRaw: require('./tsconfig.json'),
+								},
+						  }
+						: {
+								loader: 'ts-loader',
+								options: {
+									experimentalWatchApi: true,
+									transpileOnly: true,
+								},
+						  },
 				},
 			],
 		},
@@ -202,10 +225,10 @@ function getExtensionConfig(mode, env) {
 
 /**
  * @param { 'production' | 'development' | 'none' } mode
- * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; }} _env
+ * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; }} env
  * @returns { WebpackConfig }
  */
-function getWebviewsConfig(mode, _env) {
+function getWebviewsConfig(mode, env) {
 	const basePath = path.join(__dirname, 'src', 'webviews', 'apps');
 
 	const cspPolicy = {
@@ -366,6 +389,10 @@ function getWebviewsConfig(mode, _env) {
 		}),
 	];
 
+	if (env.esbuild) {
+		plugins.push(new ESBuildPlugin());
+	}
+
 	return {
 		name: 'webviews',
 		context: basePath,
@@ -388,14 +415,24 @@ function getWebviewsConfig(mode, _env) {
 					exclude: /\.d\.ts$/,
 					include: path.join(__dirname, 'src'),
 					test: /\.tsx?$/,
-					use: {
-						loader: 'ts-loader',
-						options: {
-							configFile: path.join(basePath, 'tsconfig.json'),
-							experimentalWatchApi: true,
-							transpileOnly: true,
-						},
-					},
+					use: env.esbuild
+						? {
+								loader: 'esbuild-loader',
+								options: {
+									loader: 'ts',
+									target: 'es2019',
+									// eslint-disable-next-line import/no-dynamic-require
+									tsconfigRaw: require(path.join(basePath, 'tsconfig.json')),
+								},
+						  }
+						: {
+								loader: 'ts-loader',
+								options: {
+									configFile: path.join(basePath, 'tsconfig.json'),
+									experimentalWatchApi: true,
+									transpileOnly: true,
+								},
+						  },
 				},
 				{
 					test: /\.scss$/,

yarn.lock

@@ -1770,6 +1770,21 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+esbuild-loader@2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/esbuild-loader/-/esbuild-loader-2.8.0.tgz#50c916c87ca8b4bcfe41cf050248cb70d09e4bb6"
+  integrity sha512-Pv8WPtSozaGLryTi4c91fMmho7DRhy6zRyh6v3R5DGMPBuXhyVoBdMY4we9uCa0m/CvM5v/XvWyltAsjQ+Wx8w==
+  dependencies:
+    esbuild "^0.8.33"
+    loader-utils "^2.0.0"
+    type-fest "^0.20.2"
+    webpack-sources "^2.2.0"
+
+esbuild@^0.8.33:
+  version "0.8.39"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.39.tgz#18b84a3d56173c55ee8f45bc6c7b5374b0a98ecb"
+  integrity sha512-/do5H74a5ChyeKRWfkDh3EpICXpsz6dWTtFFbotb7BlIHvWqnRrZYDb8IBubOHdEtKzuiksilRO19aBtp3/HHQ==
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -5107,6 +5122,11 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
 type-fest@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
@@ -5331,7 +5351,7 @@ webpack-sources@^1.1.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack-sources@^2.1.1:
+webpack-sources@^2.1.1, webpack-sources@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.2.0.tgz#058926f39e3d443193b6c31547229806ffd02bac"
   integrity sha512-bQsA24JLwcnWGArOKUxYKhX3Mz/nK1Xf6hxullKERyktjNMC4x8koOeaDNTA2fEJ09BdWLbM/iTW0ithREUP0w==