devDependencies keep geting bundled in the final build

[Xsmael]

I don't know what happened, but only my first build worked nicely, after that any subsequent build is way too larage (300+ Mb) and when i checked i noticed the node_modules folder was the culprit, and i also noticed that pretty much all devDependencies are included, which is not the default behaviour, i also check my package.json, but can't see what's wrong. here it is:

{
  "ManifestComments": [
    "Only add dependencies that you want shipped to the end user, for everything else, use devDependencies, including things that will be bundled by Vite.",
    "NW.js requires a name and a main, everything else is optional.",
    "The build section is used by nwjs-builder-phoenix, see its documentation for more info",
    "To turn spell checking off, remove it from the chromium-args in this file"
  ],
  "name": "HOTELN",
  "version": "1.0.1",
  "main": "http://localhost:4175",
  "node-remote": "http://localhost:4175",
  "node-main": "",
  "window": {
    "width": 960,
    "height": 600,
    "min_width": 700,
    "min_height": 500,
    "icon": "public/icon.png"
  },
  "private": true,
  "scripts": {
    "start": "concurrently npm:dev:web npm:dev:desktop",
    "dev:web": "vite --port 4175",
    "dev:desktop": "wait-on -c waitOnConfig.json http-get://localhost:4175 && nw .",
    "build": "npm run build:clean && npm run build:vue && npm run build:nw",
    "build:clean": "rimraf ./dist-vue ./dist",
    "build:vue": "vite build",
    "build:nw": "build --concurrent --tasks win-x86,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
    "build:win": "npm run build:win:clean && npm run build:vue && build --tasks win-x86 --mirror https://dl.nwjs.io/ .",
    "build:lin": "npm run build:lin:clean && npm run build:vue && build --tasks linux-x64 --mirror https://dl.nwjs.io/ .",
    "build:win:clean": "rimraf ./dist-vue ./dist/HOTELN-1.0.1-win-x86 ./dist/HOTELN-1.0.1-win-x86.zip ./dist/HOTELN-1.0.1-win-x86.7z ./dist/HOTELN-1.0.1-win-x86-Setup.exe",
    "build:lin:clean": "rimraf ./dist-vue ./dist/HOTELN-1.0.1-linux-x64 ./dist/HOTELN-1.0.1-linux-x64.zip",
    "run:win": "dist\\HOTELN-1.0.1-win-x86\\HOTELN.exe",
    "run:lin": "./dist/HOTELN-1.0.1-linux-x64/HOTELN",
    "regression": "rd /s /q node_modules & rd /s /q node_modules & rd /s /q node_modules & npm install && npm run lint && npm test && npm run build:win && npm run run:win",
    "lint": "eslint --ext .js,.vue --config=.eslintrc.js src vite.config.js .eslintrc.js",
    "fix": "eslint --fix --ext .js,.vue --config=.eslintrc.js src vite.config.js .eslintrc.js",
    "test": "vitest run --coverage",
    "update:vue-devtools": "rimraf ./node_modules/HOTELN-devtools-prebuilt && npm install"
  },
  "dependencies": {
    "@vuepic/vue-datepicker": "^7.2.0",
    "axios": "^1.5.0",
    "express": "^4.18.2",
    "flowbite": "^1.8.1",
    "flowbite-vue": "0.0.17-next.2",
    "json-2-csv": "^4.1.0",
    "localStorage": "^1.0.4",
    "noogger": "^0.1.8",
    "vue-image-lightbox": "^7.2.0",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@pinia/testing": "^0.0.15",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitest/coverage-c8": "^0.29.2",
    "@vue/test-utils": "^2.4.1",
    "autoprefixer": "^10.4.15",
    "concurrently": "^7.6.0",
    "eslint": "^8.35.0",
    "eslint-config-tjw-base": "^2.0.0",
    "eslint-config-tjw-import": "^1.0.0",
    "eslint-config-tjw-jest": "^2.0.0",
    "eslint-config-tjw-vue": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.13.2",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jest": "^27.2.1",
    "eslint-plugin-vue": "^9.9.0",
    "eslint-plugin-vuejs-accessibility": "^2.1.0",
    "jest-serializer-vue-tjw": "^3.19.0",
    "jsdom": "^21.1.0",
    "nw-vue-devtools-prebuilt": "^0.0.10",
    "nwjs-builder-phoenix": "^1.15.0",
    "pinia": "^2.0.32",
    "postcss": "^8.4.28",
    "rimraf": "^4.3.0",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.9",
    "vitest": "^0.29.2",
    "vue": "^3.2.47",
    "wait-on": "^7.0.1"
  },
  "chromium-args": "--enable-spell-checking --load-extension='./node_modules/nw-vue-devtools-prebuilt/extension'",
  "build": {
    "nwVersion": "v0.70.1",
    "nwFlavor": "normal",
    "targets": [
      "zip",
      "nsis7z"
    ],
    "files": [
      "**/*"
    ],
    "excludes": [
      "src/**/*",
      "tests/**/*",
      "public/**/*",
      "dist-vue/**/*.js.map",
      "dist-vue/**/*.css.map",
      "dist-vue/**/*-legacy*",
      ".editorconfig",
      ".eslintignore",
      ".eslintrc",
      ".gitignore",
      "CODE_OF_CONDUCT.md",
      "index.html",
      "jsconfig.json",
      "package-lock.json",
      "screenshot.png",
      "vite.config.js",
      "waitOnConfig.json",
      "bin/mysql/mysql-5.1.72-win32/data/hoteln/*",
      "bin/mysql/mysql-5.1.72-win32/data/ib*",
      "bin/miysql/mysql-5.1.72-win32/data/LAPTOP*"
    ],
    "strippedProperties": [
      "ManifestComments",
      "scripts",
      "devDependencies",
      "build"
    ],
    "overriddenProperties": {
      "main": "http://localhost:4185",
      "node-remote": "http://localhost:4185",
      "node-main": "server.js",
      "chromium-args": "--enable-spell-checking",
      "window": {
        "width": 960,
        "height": 600,
        "min_width": 700,
        "min_height": 500,
        "icon": "dist-vue/icon.png"
      }
    },
    "win": {
      "icon": "public/icon-256.ico",
      "productName": "HOTELN",
      "companyName": "ECODEV INT",
      "fileDescription": "",
      "copyright": "Tous droits réservés",
      "productVersion": "1.0.1.0"
    },
    "mac": {
      "icon": "public/icon.icns"
    },
    "nsis": {
      "icon": "public/icon-256.ico",
      "unIcon": "public/icon.ico",
      "languages": [
        "English"
      ],
      "diffUpdaters": false,
      "hashCalculation": true
    }
  }
}

Any idea ?

[TheJaredWilcurt]

Diffing your package.json with the current one in this repo doesn't show anything that would cause this issue:

• https://www.diffchecker.com/W3mNhkzJ

The key trick to how this works is the "strippedProperties" includes "devDependencies". So when copying the package.json into the dist\app-name-version-number-os-arch folder, it will produce a new package.json file that does not even include a devDependencies section in it. It then runs an npm install and that will only install the dependencies (because there won't be any devDependencies in the file).

You should delete your dist folder and run a build and then investigate the package.json that was created.

You are also including some items in the dependencies section that will likely be bundled by Vite, they don't need to be npm installed and sent with your distribution:

• @vuepic/vue-datepicker
• axios (unless used by Node too)
• vue-image-lightbox
• vue-router

Those are just the ones I am familiar with, the others may be able to be moved to devDeps too. You should experiment with that too. However, this will likely only reduce the package size by a few megabytes.

[Xsmael]

Thank you for these details! i didn't even understand this process!

ok did what you suggested and indeed the package.json from distis clean:

{
    "name": "HOTELN",
    "version": "1.0.1",
    "main": "http://localhost:4185",
    "node-remote": "http://localhost:4185",
    "node-main": "server.js",
    "window": {
        "width": 960,
        "height": 600,
        "min_width": 700,
        "min_height": 500,
        "icon": "dist-vue/icon.png"
    },
    "private": true,
    "dependencies": {
        "@vuepic/vue-datepicker": "^7.2.0",
        "axios": "^1.5.0",
        "express": "^4.18.2",
        "flowbite": "^1.8.1",
        "flowbite-vue": "0.0.17-next.2",
        "json-2-csv": "^4.1.0",
        "localStorage": "^1.0.4",
        "noogger": "^0.1.8",
        "vue-image-lightbox": "^7.2.0",
        "vue-router": "^4.2.4"
    },
    "chromium-args": "--enable-spell-checking"
}

no devDependencies

however node_modules from dist has 631 folders which is the exact same number of folders in the main node_modules and both weighs 600Mo roughly so, now i'm convinced that devDependencies are getting there somehow.

Also in dist i renamed node_modules and performed the npm install myself which resulted in only 175 folders.

But i wonder what's wrong now.

You are also including some items in the dependencies section that will likely be bundled by Vite, they don't need to be npm installed and sent with your distribution:

@vuepic/vue-datepicker axios (unless used by Node too) vue-image-lightbox vue-router

About that, i don't understand; i'm using vue-datepicker component which provides me with UI component of a datepicker that i used for selecting date rages in my app. If i move it to devDependencies, will it still work in the bundled app ? I've also made routes and using vue router to navigate through them( yes i know its a desktop app, but the router just helps me to keep things orginised) so can I still move it ? same for axios, I do API calls with it to load json data.
Maybe there is something i missed.

By the way, i also notice the locales folder which seems to be generated by the builder has about 114 files for 74Mb I guess these are language translations but i wonder for what? anyways, is there way to just select the locales that i wan't and save some more space ?

[TheJaredWilcurt]

When you do npm run build:vue, it will build just your Vue.js app (for web, not for desktop). Everything required to make your app run on the web will be included in the bundle that Vite produces (in ./dist-vue). So the only dependencies you need to ship with your application are the ones that Vite will not include in it's bundle (the stuff specifically used by Node.js, like express).

Are you checking the ./dist/HOTELN-1.0.1-win-x86/node_modules folder, that is the folder that should be created with just the dependencies.

When you do npm run build it will do the Vue build first (npm run build:vue) then use the bundle Vite made in your desktop package (npm run build:nw).

For the locales question:

• https://dev.to/thejaredwilcurt/reducing-app-distribution-size-in-nwjs-3d5f

[Xsmael]

Alright, sorry for the unclarity

Are you checking the ./dist/HOTELN-1.0.1-win-x86/node_modules folder, that is the folder that should be created with just the dependencies.

Yes! Whenever i mentionned node_modules from dist i was in fact talking about ./dist/HOTELN-1.0.1-win-x86/node_modules So i compared ./dist/HOTELN-1.0.1-win-x86/node_modules with the main node_modules and they looked pretty much the same meaning that devDependencies followed despite ./dist/HOTELN-1.0.1-win-x86/package.json having none.

After the previous tests, cleaned everything and tried again, and now i have 220 folders in ./dist/HOTELN-1.0.1-win-x86/node_modules instead of 631 which is much better but still more than what i get when i do npm install manually. Also it is surprising, is there any caching mechanism in the process ? because i litteraly changed nothing. Apart from running npm install manually, deleting everything and running the builder again.

For the locales i checked the link, it appears to me that i have to manually remove the files before running the script to create the installer, i thought there would be some option to specify in packaje.json or the CLI. If that's the only way, then it's fine.

[TheJaredWilcurt]

You can try npm cache clean --force. Removing of locales can crash your app, so it is not built in to the build tool. Be sure to read all of that post.

[Xsmael]

You can try npm cache clean --force. Removing of locales can crash your app, so it is not built in to the build tool. Be sure to read all of that post.

Alright, thanks for all. Yeah I did read about the risks too, no worries 👍