Build speed regression between 65 to beta.66

Pre-flight checklist

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project uses.
• I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

6.0.0-beta.66

Electron version

19.1.4

Operating system

macOS 11.7

Last known working Electron Forge version

6.0.0-beta.65

Expected behavior

electron-forge start takes the same amount of time before/after v66

Actual behavior

electron-forge start takes 3x longer

Steps to reproduce

https://github.com/electron/forge/compare/v6.0.0-beta.65...v6.0.0-beta.66

old output — takes 30 seconds to 1 minute, computer does not hang

➜  yarn start
yarn run v1.22.19
$ cross-env APP_CHANNEL=development electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies: 4 / 4
✔ Compiling Main Process Code
✔ Launch Dev Servers
✔ Compiling Preload Scripts
✔ Launching Application


Webpack Output Available: http://localhost:9000

new output — takes 2-3 minutes and the computer hangs a few times/fan spins up (output seems different)

➜  yarn start
yarn run v1.22.19
$ cross-env APP_CHANNEL=development electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies: 4 / 4
✔ Compiling Main Process Code
⠋ Launch Dev Servers⠋ Compiling Renderer Code⠋ Compiling Renderer Code⠋ Compiling Renderer Code⠋ Compiling Renderer Code⠋ Compiling Renderer Code⠋ Compiling Renderer Code⠋ Compiling Renderer Code⠋ Compiling Renderer Code⠋ Compiling Renderer Code⠋ Compiling Renderer Code⠋ Compiling Renderer Code⠋ Compiling Renderer Code✔ Compiling Renderer Code
✔ Compiling Renderer Code
✔ Compiling Renderer Code
✔ Compiling Renderer Code
✔ Compiling Renderer Code
✔ Compiling Renderer Code
✔ Compiling Renderer Code
✔ Compiling Renderer Code
✔ Compiling Renderer Code
✔ Compiling Renderer Code
✔ Compiling Renderer Code
✔ Compiling Renderer Code
✔ Launch Dev Servers
✔ Compiling Preload Scripts
✔ Launching Application


Webpack Output Available: http://localhost:9000

package.json

    "@electron-forge/cli": "6.0.0-beta.66",
    "@electron-forge/maker-appx": "6.0.0-beta.66",
    "@electron-forge/maker-dmg": "6.0.0-beta.66",
    "@electron-forge/maker-zip": "6.0.0-beta.66",
    "@electron-forge/plugin-auto-unpack-natives": "6.0.0-beta.66",
    "@electron-forge/plugin-webpack": "6.0.0-beta.66",

We compile a lot of renderer windows, and share the preload between them all (maybe this pattern isn’t good and is what the issue is?)

forge.config.js

[
  '@electron-forge/plugin-webpack',
  {
    mainConfig: './webpack.main.config.js',
    devContentSecurityPolicy: '',
    renderer: {
      config: './webpack.renderer.config.js',
      entryPoints: [
        {
          html: './src/renderer/index.html',
          js: './src/renderer/windows/index.tsx', // We can remove this in beta.69 or so!
          name: 'main_window',
          preload: {
            js: './src/main/preload.ts',
          },
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_0>',
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_1>',
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_2>',
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_3>',
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_4>',
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_5>',
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_6>',
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_7>',
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_8>',
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_9>',
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_10>',
        },
        {
          html: './src/renderer/index.html',
          js: '<snip>/index.tsx',
          name: '<snip_11>',
        },
      ],
    },
  },
]

Additional information

No response

[MarshallOfSound]

I think it’s the change that makes getRendererConfig return multiple configs. Passing multiple configs to webpack() is the same as running await Promise.all(configs.map(config => webpack(config))) under the hood. I think we can dramatically speed this up again.

Old: 1 renderer config New: N renderer config Proposed: Max 2 renderer configs, we should bucket entry points into 2 configs. One for nodeIntegration and one for not.

[kyleshay]

Ah, I was able to find the issue!

tl;dr is that fork-ts-checker-webpack-plugin slows the build based on the number of renderer processes with the above linked commit.

If I remove the fork-ts-checker-webpack-plugin, then my typescript/webpack compilation takes a lot longer—the app will boot as soon as it did previously, via app.on('ready'), but webpack will still be compiling my renderers, which means the BrowserWindow.on('ready-to-show') event can take up to another 30 seconds after the app.on('ready') event was fired.

Here are the steps

1. Add typescript & fork-ts-checker-webpack-plugin

yarn add --dev typescript fork-ts-checker-webpack-plugin

1. Add a lot of entrypoints to forge.config.js:

// 10 is more than enough to see the issue, if you use 20 it doubles the time, etc.
const entryPoints = [...new Array(10)].map(() => ({
              html: "./src/index.html",
              js: "./src/renderer.js",
              name: "main_window",
              preload: {
                js: "./src/preload.js",
              },
            }))


module.exports = {
  packagerConfig: {},
  rebuildConfig: {},
  makers: [
    {
      name: "@electron-forge/maker-squirrel",
      config: {},
    },
    {
      name: "@electron-forge/maker-zip",
      platforms: ["darwin"],
    },
    {
      name: "@electron-forge/maker-deb",
      config: {},
    },
    {
      name: "@electron-forge/maker-rpm",
      config: {},
    },
  ],
  plugins: [
    {
      name: "@electron-forge/plugin-webpack",
      config: {
        mainConfig: "./webpack.main.config.js",
        renderer: {
          config: "./webpack.renderer.config.js",
          entryPoints,
        },
      },
    },
  ],
};

1. Add the ts-checker to webpack.renderer.config.js:

const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const rules = require("./webpack.rules");

rules.push({
  test: /\.css$/,
  use: [{ loader: "style-loader" }, { loader: "css-loader" }],
});

module.exports = {
  // Put your normal webpack config below here
  plugins: [new ForkTsCheckerWebpackPlugin({ async: false })],
  module: {
    rules,
  },
};

1. Add tsconfig.json

{
    "compilerOptions": {
      "target": "esnext",
      "lib": ["dom", "esnext"],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx",
      "typeRoots": ["./src/types", "./node_modules/@types"]
    },
    "include": ["src", "./src/types"]
  }
  

1. yarn start