Prerequisites

• [√] Using npm
• [√ ] Using an up-to-datemain branch
• [√ ] Using latest version of devtools.Check the docs for how to update
• [√ ] Tried solutions mentioned in#400
• For issue in production release, add devtools output ofDEBUG_PROD=true npm run build && npm start

Expected Behavior

In thewebpack.config.renderer.dev.dll.ts andwebpack.config.renderer.dev.ts files,DllPlugin andDllReferencePlugin are used respectively.
Executing the build:dll command successfully generatesrenderer.dev.dll.js andrenderer.json in the dll folder.
Under normal circumstances, the HTML file in the renderer process should reference therenderer.dev.dll.js file to function correctly.

Current Behavior

As shown in the figure, the HTML file currently only references therenderer.dev.js file and does not reference therenderer.dev.dll.js file.
However, the renderer process can still render the page normally.
This proves that the Dll configuration is not effective.

To further verify that the Dll was not working, I consulted the Webpack documentation and discovered that thecontext configuration forDllPlugin must point to the same folder as thecontext configuration forDllReferencePlugin .
In the project template,DllReferencePlugin has the context configured, butDllPlugin does not (it defaults to the Webpack context).

I then commented out thecontext configuration ofDllReferencePlugin , causing both to use the default value.
After restarting the development environment, I found that the renderer process threw an error, and the size of therenderer.dev.js file decreased (this is because the Dll started functioning).

As for the renderer process error, it occurred because therenderer.dev.dll.js file was not referenced in the HTML file. A solution for this will be provided later.

This demonstrates that the project template configuration does not enable the Dll to function properly. Therenderer.dev.js file built in the development environment includes all the dependency libraries.

Steps to Reproduce

Simply clone the project template, install the dependencies, and use npm start to start the development environment to reproduce the issue.

Possible Solution

There are a total of three modification points, as outlined below:
Ⅰ. Set thecontext configuration ofDllPlugin andDllReferencePlugin to the same folder
Ⅱ. In the HTML file, reference the builtrenderer.dev.dll.js file.
This step can be automated using theadd-asset-html-webpack-plugin library to help with the referencing。

new AddAssetHtmlPlugin({  filepath: path.resolve(webpackPaths.dllPath, 'renderer.dev.dll.js'),  outputPath: '',   publicPath: '/', }),

Ⅲ. Resolve the error issue
After completing the above steps, the HTML file will automatically include therenderer.dev.dll.js file. However, the following error (as shown in the figure) occurs. I haven't delved deeply into this issue, but the cause might be that thedevtool configuration inwebpack.config.renderer.dev.dll.ts is set toeval , which triggers the Content Security Policy (CSP) in the renderer process. My solution is to change eval toinline-source-map .

After addressing the three issues mentioned above, you need to run thebuild:dll command first to regenerate therenderer.dev.dll.js file. Then, use the start command to launch the development environment, and you will find that the Dll is working correctly.

Context

After cloning this project, I was able to reproduce the issue without making any modifications to the template.

Your Environment

• Node version : V20.14.0
• electron-react-boilerplate version or branch : main
• Operating System and version : windows11