The detailed explanation of externalizeDepsPlugin

[Oleksii14]

Hey! I would like to ask you to explain why do we need to "externalize" dependencies from main/preload/renderer. I read two sections in the docs (1 , 2) and it is still not fully clear, for example, why do we need to put real app's dependencies to devDependencies.

I would appreciate if you provide more detailed examples or cases

[alex8088]

We cannot avoid using third-party modules during development. These modules usually support CJS, so we don't need to rebuild and bundle them, we only need to deal with our own code. This is called "externalization". Of course, we can also bundled them, but you can imagine how big the final chunk will be, which is extremely unfavorable for module loading.

However, these modules are required by the app, so they must be installed in dependencies, so that they will be packaged together by the packaging tool, and will not be lost. But if installed in devDependencies, packaging tools are usually not packaged.

[Oleksii14]

However, these modules are required by the app, so they must be installed in dependencies, so that they will be packaged together by the packaging tool, and will not be lost.

In this case, why is it recommended to install dependencies to devDepencies in the docs?

[alex8088]

You should know whether your module is used by the main process or the renderer process. The renderer development is the same as regular web app development and requires full bundling. And the build standard is iife. After these modules are bundled, they are no longer needed because they have been bundled into the renderer chunks. So install them in devDep, then the packaging tool will not pack them to app.

In addition, there is no need to use externalizeDepPlugin in the renderer vite config.