Merge pull request #3630 from balena-io/improve-webpack-build

patch: Improve webpack build time

lib/gui/app/app.ts

@@ -28,7 +28,6 @@ import * as EXIT_CODES from '../../shared/exit-codes';
 import * as messages from '../../shared/messages';
 import * as availableDrives from './models/available-drives';
 import * as flashState from './models/flash-state';
-import { init as ledsInit } from './models/leds';
 import { deselectImage, getImage } from './models/selection-state';
 import * as settings from './models/settings';
 import { Actions, observe, store } from './models/store';
@@ -217,7 +216,7 @@ function prepareDrive(drive: Drive) {
 			disabled: true,
 			icon: 'warning',
 			size: null,
-			link: 'https://www.raspberrypi.org/documentation/hardware/computemodule/cm-emmc-flashing.md',
+			link: 'https://www.raspberrypi.com/documentation/computers/compute-module.html#flashing-the-compute-module-emmc',
 			linkCTA: 'Install',
 			linkTitle: 'Install missing drivers',
 			linkMessage: outdent`
@@ -340,7 +339,13 @@ window.addEventListener('beforeunload', async (event) => {
 });
 
 export async function main() {
+	try {
+		const { init: ledsInit } = require('./models/leds');
 		await ledsInit();
+	} catch (error: any) {
+		exceptionReporter.report(error);
+	}
+
 	ReactDOM.render(
 		React.createElement(MainPage),
 		document.getElementById('main'),

lib/shared/permissions.ts

@@ -20,7 +20,7 @@ import { promises as fs } from 'fs';
 import * as _ from 'lodash';
 import * as os from 'os';
 import * as semver from 'semver';
-import * as sudoPrompt from 'sudo-prompt';
+import * as sudoPrompt from '@balena/sudo-prompt';
 import { promisify } from 'util';
 
 import { sudo as catalinaSudo } from './catalina-sudo/sudo';
@@ -29,16 +29,18 @@ import * as errors from './errors';
 const execAsync = promisify(childProcess.exec);
 const execFileAsync = promisify(childProcess.execFile);
 
+type Std = string | Buffer | undefined;
+
 function sudoExecAsync(
 	cmd: string,
 	options: { name: string },
-): Promise<{ stdout: string; stderr: string }> {
+): Promise<{ stdout: Std; stderr: Std }> {
 	return new Promise((resolve, reject) => {
 		sudoPrompt.exec(
 			cmd,
 			options,
-			(error: Error | null, stdout: string, stderr: string) => {
+			(error: Error | undefined, stdout: Std, stderr: Std) => {
-				if (error != null) {
+				if (error !== undefined) {
 					reject(error);
 				} else {
 					resolve({ stdout, stderr });

package.json

@@ -16,13 +16,13 @@
     "lint-ts": "balena-lint --fix --typescript typings lib tests scripts/clean-shrinkwrap.ts webpack.config.ts",
     "lint-css": "prettier --write lib/**/*.css",
     "lint": "npm run lint-ts && npm run lint-css",
-    "test-spectron": "mocha --recursive --reporter spec --require ts-node/register --require-main tests/gui/allow-renderer-process-reuse.ts tests/spectron/runner.spec.ts",
+    "test-spectron": "mocha --recursive --reporter spec --require ts-node/register/transpile-only --require-main tests/gui/allow-renderer-process-reuse.ts tests/spectron/runner.spec.ts",
-    "test-gui": "electron-mocha --recursive --reporter spec --require ts-node/register --require-main tests/gui/allow-renderer-process-reuse.ts --full-trace --no-sandbox --renderer tests/gui/**/*.ts",
+    "test-gui": "electron-mocha --recursive --reporter spec --require ts-node/register/transpile-only --require-main tests/gui/allow-renderer-process-reuse.ts --full-trace --no-sandbox --renderer tests/gui/**/*.ts",
-    "test-shared": "electron-mocha --recursive --reporter spec --require ts-node/register --require-main tests/gui/allow-renderer-process-reuse.ts --full-trace --no-sandbox tests/shared/**/*.ts",
+    "test-shared": "electron-mocha --recursive --reporter spec --require ts-node/register/transpile-only --require-main tests/gui/allow-renderer-process-reuse.ts --full-trace --no-sandbox tests/shared/**/*.ts",
     "test": "npm run lint && npm run test-gui && npm run test-shared && npm run test-spectron && npm run sanity-checks",
     "sanity-checks": "bash scripts/ci/ensure-all-file-extensions-in-gitattributes.sh",
     "start": "./node_modules/.bin/electron .",
-    "postinstall": "electron-builder install-app-deps",
+    "postinstall": "electron-rebuild -t prod,dev,optional",
     "webpack": "webpack",
     "watch": "webpack serve --no-optimization-minimize --config ./webpack.dev.config.ts",
     "concourse-build-electron": "npm run webpack",
@@ -44,33 +44,10 @@
   },
   "author": "Balena Inc. <hello@etcher.io>",
   "license": "Apache-2.0",
-  "dependencies": {
-    "@fortawesome/fontawesome-free": "5.13.1",
-    "aws4-axios": "2.2.1",
-    "d3": "4.13.0",
-    "debug": "4.2.0",
-    "etcher-sdk": "6.3.0",
-    "immutable": "3.8.1",
-    "lodash": "4.17.10",
-    "node-ipc": "9.1.1",
-    "omit-deep-lodash": "1.1.4",
-    "outdent": "0.7.1",
-    "path-is-inside": "1.0.2",
-    "pretty-bytes": "5.3.0",
-    "react": "16.8.5",
-    "react-dom": "16.8.5",
-    "redux": "4.0.5",
-    "rendition": "19.2.0",
-    "resin-corvus": "2.0.5",
-    "semver": "7.3.2",
-    "styled-components": "5.1.0",
-    "sudo-prompt": "github:zvin/sudo-prompt#7cdede2f0da28fbcc2db48402d7d935f3a825c91",
-    "sys-class-rgb-led": "3.0.0",
-    "url-loader": "4.1.1",
-    "uuid": "8.1.0"
-  },
   "devDependencies": {
     "@balena/lint": "5.3.0",
+    "@balena/sudo-prompt": "9.2.1-workaround-windows-amperstand-in-username-0849e215b947987a643fe5763902aea201255534",
+    "@fortawesome/fontawesome-free": "5.13.1",
     "@svgr/webpack": "5.5.0",
     "@types/chai": "4.2.7",
     "@types/copy-webpack-plugin": "6.0.0",
@@ -79,40 +56,64 @@
     "@types/mocha": "8.0.3",
     "@types/node": "14.14.41",
     "@types/node-ipc": "9.1.2",
-    "@types/react": "^16.8.5",
+    "@types/react": "16.8.5",
     "@types/react-dom": "16.8.4",
     "@types/semver": "7.1.0",
     "@types/sinon": "9.0.0",
     "@types/terser-webpack-plugin": "5.0.2",
     "@types/tmp": "0.2.0",
     "@types/webpack-node-externals": "2.5.0",
+    "aws4-axios": "2.2.1",
     "chai": "4.2.0",
     "copy-webpack-plugin": "7.0.0",
     "css-loader": "5.0.1",
+    "d3": "4.13.0",
+    "debug": "4.2.0",
     "electron": "12.0.2",
     "electron-builder": "22.10.5",
     "electron-mocha": "9.3.2",
     "electron-notarize": "1.0.0",
+    "electron-rebuild": "3.2.5",
     "electron-updater": "4.3.5",
+    "esbuild-loader": "2.16.0",
+    "etcher-sdk": "6.3.0",
     "file-loader": "6.2.0",
     "husky": "4.2.5",
+    "immutable": "3.8.1",
     "lint-staged": "10.2.2",
+    "lodash": "4.17.10",
     "mini-css-extract-plugin": "1.3.3",
     "mocha": "8.0.1",
     "native-addon-loader": "2.0.1",
+    "node-ipc": "9.1.1",
+    "omit-deep-lodash": "1.1.4",
+    "outdent": "0.7.1",
+    "path-is-inside": "1.0.2",
     "pnp-webpack-plugin": "1.6.4",
+    "pretty-bytes": "5.3.0",
+    "react": "16.8.5",
+    "react-dom": "16.8.5",
+    "redux": "4.0.5",
+    "rendition": "19.2.0",
+    "resin-corvus": "2.0.5",
+    "semver": "7.3.2",
     "simple-progress-webpack-plugin": "1.1.2",
     "sinon": "9.0.2",
     "spectron": "14.0.0",
     "string-replace-loader": "3.0.1",
     "style-loader": "2.0.0",
+    "styled-components": "5.1.0",
+    "sys-class-rgb-led": "3.0.0",
+    "terser-webpack-plugin": "5.2.5",
     "ts-loader": "8.0.12",
     "ts-node": "9.1.1",
     "tslib": "2.0.0",
-    "typescript": "4.2.2",
+    "typescript": "4.4.4",
+    "url-loader": "4.1.1",
+    "uuid": "8.1.0",
     "webpack": "5.11.0",
     "webpack-cli": "4.2.0",
-    "webpack-dev-server": "3.11.2"
+    "webpack-dev-server": "4.5.0"
   },
   "versionist": {
     "publishedAt": "2021-11-09T13:13:32.850Z"

tsconfig.json

@@ -1,12 +1,21 @@
 {
   "compilerOptions": {
     "strict": true,
+    "target": "es2019",
+    "typeRoots": ["./node_modules/@types", "./typings"],
+    "module": "commonjs",
+    "lib": ["dom", "esnext"],
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react",
+    "pretty": true,
+    "sourceMap": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "resolveJsonModule": true,
+    "noImplicitReturns": true,
-    "target": "es2019",
+    "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
-    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
-    "typeRoots": ["./node_modules/@types", "./typings"]
+    "resolveJsonModule": true,
   }
 }

tsconfig.webpack.json

@@ -10,7 +10,16 @@
     "jsx": "react",
     "typeRoots": ["./node_modules/@types", "./typings"],
     "importHelpers": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "lib": ["dom", "esnext"],
+    "declaration": true,
+    "declarationMap": true,
+    "pretty": true,
+    "sourceMap": true,
+    "baseUrl": "./src",
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowJs": true
   },
   "include": [
     "lib/**/*.ts",

typings/sudo-prompt/index.d.ts

@@ -1 +1 @@
-declare module 'sudo-prompt';
+declare module '@balena/sudo-prompt';

webpack.config.ts

@@ -26,6 +26,8 @@ import * as TerserPlugin from 'terser-webpack-plugin';
 import { BannerPlugin, NormalModuleReplacementPlugin } from 'webpack';
 import * as PnpWebpackPlugin from 'pnp-webpack-plugin';
 
+import * as tsconfigRaw from './tsconfig.webpack.json';
+
 /**
  * Don't webpack package.json as mixpanel & sentry tokens
  * will be inserted in it after webpacking
@@ -141,13 +143,13 @@ const commonConfig = {
 		minimize: true,
 		minimizer: [
 			new TerserPlugin({
+				parallel: true,
 				terserOptions: {
 					compress: false,
 					mangle: false,
-					output: {
+					format: {
-						beautify: true,
 						comments: false,
-						ecma: 2018,
+						ecma: 2020,
 					},
 				},
 				extractComments: false,
@@ -173,9 +175,11 @@ const commonConfig = {
 				test: /\.tsx?$/,
 				use: [
 					{
-						loader: 'ts-loader',
+						loader: 'esbuild-loader',
 						options: {
-							configFile: 'tsconfig.webpack.json',
+							loader: 'tsx',
+							target: 'es2021',
+							tsconfigRaw,
 						},
 					},
 				],