fix(plugin-vite): package volume size to large

[caoxiemeihao]

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project follows, as appropriate.
• The changes are appropriately documented (if applicable).
• The changes have sufficient test coverage (if applicable).
• The testsuite passes successfully on my local machine (if applicable).

Summarize your changes:

Fixes:

#3224
#3298
#3293
#3377
#3420

At present, I still need to exactly include the third-party packages in dependencies in to node_modules, because they cannot be built normally be Vite, such as C/C++ addons.
I haven't found the right logic to handle node_modules, I'm trying...

[GitMurf]

Is there any update on this? Saw a few people recently post about this issue in the Electron Discord server and pointed them here for reference.

[GitMurf]

At present, I still need to exactly include the third-party packages in dependencies in to node_modules, because they cannot be built normally be Vite, such as C/C++ addons. I haven't found the right logic to handle node_modules, I'm trying...

@caoxiemeihao Have you looked at the code I posted here (#3224 (comment))? I believe this is the type of solution you are looking for. Whatever node_modules vite has to externalize, we need to whitelist to include in the package. The tricky part is we then need to also include its nested dependencies. This is where I used the walker created by @MarshallOfSound called flora-colossus.

[xhc-code]

Why not use vite to build the dist directory and use the built html resources in the dist directory? Now the behavior of plugin-vite is to copy the entire source code (including the directory that node_modules depends on) to the out directory, and then perform the build operation again. My project built with Vite is only 108kb, but built with this plug-in it is nearly 700m. I don’t know what I did wrong.

[an-lee]

Hello! I hope you're doing well. Any chance of an update? We're eagerly waiting to release a new app with vite. Your contributions are greatly appreciated! Thank you!

[BlackHole1]

Ping @caoxiemeihao

[akash07k]

@caoxiemeihao Is there any update to this?
I hope this gets merged soon.

[sipt]

I already raised this issue last year. #3071 (comment)

I resolved by modifying the forge.config.ts file.

const config: ForgeConfig = {
  packagerConfig: {
    ignore: (file) => {
      if (!file) return false;
      return (
        !/^[/\\]package.json$/.test(file) &&
        !/^[/\\]\.vite($|[/\\]).*$/.test(file)
      );
    },
  },
}

[GitMurf]

I already raised this issue last year. #3071 (comment)

I resolved by modifying the forge.config.ts file...

I have a similar solution but the problem is for a generic solution it is more complicated because if you have any native node libs (like Realm or SQLite etc) you have to add more logic to include them since they do not get bundled (external). And then you have to check their nested dependencies and also include them. I had to do quite a bit of extra logic to get it working for us and I think that is the complication here, that they need to come up with a way to generically handle this for all users.

[caoxiemeihao]

I'm very sorry I've been busy with my work and I'm currently trying to fix it.

[PascalPixel]

Awesome work!

[sethyuan]

This is not yet released, right? I'm using "@electron-forge/plugin-vite": "^7.2.0" and it still bundles the whole src.
When is a release going to be available?

[GitMurf]

Looking back at this, isn't this just marking all dependencies from the package.json as "External" for vite and then copying all dependencies from package.json into the final package in the packageAfterCopy forge hook?

So doesn't this still copy the entire node_modules folder and prevent doing any tree shaking with vite (since all packages are marked as external)?

[caoxiemeihao]

Looking back at this, isn't this just marking all dependencies from the package.json as "External" for vite and then copying all dependencies from package.json into the final package in the packageAfterCopy forge hook?

So doesn't this still copy the entire node_modules folder and prevent doing any tree shaking with vite (since all packages are marked as external)?

Only dependencies in dependencies will be copied. The dependencies in devDependencies will not be copied, they will be built by Vite.
I hope you can carefully test this obvious difference.
Even if you use electron-builder you will get the same effect.

[GitMurf]

@caoxiemeihao I am just here trying to understand and to help where I can (as seen by several of my comments above in this PR sharing some of my solutions I tried). If my last comment came off any differently I apologize... we are all on the same team 👍

As per your response. Dev dependencies don't build at all as they are part of the dev process. Vite doesn't bundle them unless you mark a true dependency as dev accidentally. It should only be stuff like forge, eslint, prettier, vite etc etc.

Vite has the ability to mark packages as external primarily for things like native node addons which need to be packaged with the app (realm and SQLite in my case). But a majority of dependencies are supposed to be bundled with the rest of the code and tree shaken (if desired) leaving only those external packages needing to be packaged from node modules with the electron app.

As an example, my build code goes from 250mb (with the current vite plugin from this PR which copies all node modules marked as dependency)... down to 29mb when I only include the external native node addons and allow all my other dependencies to be tree shaken and bundled by vite (which they already do anyways).

@MarshallOfSound given you wrote flora-collosus maybe you could chime in here with your 2 cents and correct me if I am mistaken? Or can provide any guidance? Thanks!

[GitMurf]

Here is my "hack" I applied to the forge-plugin-vite util/package.js file with a pnpm patch to override the current functionality so that it only packages my 4 external libs (along with all their nested dependencies). This ties to when I referenced in my last message going from 250mb down to 29mb... and to potentially use as a MVP / idea for implementing. My initial thought would be allow this to read from your vite config the libs you mark as External and only package those ones (as the rest are built/bundled by vite with your main.js etc.).

In my vite config I also set these same 4 packages as External, as opposed to all Dependencies from package.json as the forge vite typescript template defaults to.

Hope this helps.

Patch name: @[email protected]

diff --git a/dist/util/package.js b/dist/util/package.js
index be2a9f9b575fb0d9eb2d7eb4df9e500e3baf26b0..f5c42c1dc7f8b0b6d712b3f4dc2be9fd93e28c7e 100644
--- a/dist/util/package.js
+++ b/dist/util/package.js
@@ -34,7 +34,15 @@ async function lookupNodeModulesPaths(root, paths = []) {
 }
 exports.lookupNodeModulesPaths = lookupNodeModulesPaths;
 async function resolveDependencies(root) {
-    const rootDependencies = Object.keys((await fs_extra_1.default.readJson(node_path_1.default.join(root, 'package.json'))).dependencies || {});
+    // FIXME: spm patch to allow tree shaking with vite and forge
+    //
+    // const rootDependencies = Object.keys((await fs_extra_1.default.readJson(node_path_1.default.join(root, 'package.json'))).dependencies || {});
+    const rootDependencies = [
+      'realm',
+      'electron-squirrel-startup',
+      'better-sqlite3',
+      'mdast-util-from-markdown',
+    ];
     const resolve = async (prePath, dependencies, collected = new Map()) => await Promise.all(dependencies.map(async (name) => {
         let curPath = prePath, depPath = null, packageJson = null;
         while (!packageJson && !isRootPath(curPath)) {

[joeyballentine]

I'm finding the same thing by the way (on the latest forge version, 7.4.0). Vite bundles ~200mb of my node modules, which not only increases the total bundle size, but also increases packing time and extraction time.

Using the webpack plugin, exactly 0 node modules are bundled. That's right, nothing. Why is vite so different here? Shouldn't it be tree shaking all these?

[joeyballentine]

Using the patch mentioned above, Vite is now properly bundling everything, including proper tree shaking.

[caoxiemeihao]

@MarshallOfSound given you wrote flora-collosus maybe you could chime in here with your 2 cents and correct me if I am mistaken? Or can provide any guidance? Thanks!

Sorry, I didn't discover flora-collosus before, if necessary I will submit a PR and switch to flora-dollosus.

[joeyballentine]

Using the patch mentioned above, Vite is now properly bundling everything, including proper tree shaking.

Based on community feedback. I updated the API design for migration to 7.3.0+, see #3506 (comment).

That has nothing to do with this issue or the patch. My project is new and created with the newer template. Do you actually understand what the issue is here?

[MrgSub]

This issue started happening randomly in my project. Setting external packages to a few modules makes the build pass but no modules are bundled in the resultant .js file.

[GitMurf]

This issue started happening randomly in my project. Setting external packages to a few modules makes the build pass but no modules are bundled in the resultant .js file.

"No modules" are bundled? or you mean just the external ones are not bundled? Because the external ones are not meant to be bundled in the .js file.

[MrgSub]

The issue is happening due to my project using 7.5.0 instead of 7.4.0
Previous behavior was including all of my npm modules into the published package, now when I start my app it throws an error {x} module not found for each npm package my app is relying on.
Edit: The above worked for me, I was able to have all the node modules needed to run the app in the bundle. The next issue was that electron-squirrel-startup was also marked as external, it needed to be excluded. The next issue was due to sentry, I took it off. finally I have a build that runs.