CODEWITHSUNDEEP
node.jsvue.js
Trevor Hector
Trevor Hector

Reputation: 639

Vue.js vast size of node_modules (Beginner question)

I am starting to play around with vue.js. I did follow a recommendation and added the following dev dependencies:

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
}

This will load about 910 modules in node_modules. The size is about 180 MB. When I try to copy or transfer the whole project it takes a minute or so to calculate ten thousand files. That is very long for a small project.

Am I doing something wrong? This seems a lot of stuff to carry along. Any tips are appreciated.

Upvotes: 2

Views: 1459

Answers (1)

Nafees Anwar
Nafees Anwar

Reputation: 6598

No, you are not doing anything wrong. All these dependencies are development dependencies. It means they are not part of your application but are there to help in development. For example eslint is a code quality tool that has nothing to do with your application. It is only used for checking code quality and formatting in development and when you'll build your application, it will not part of it.

Usually, javascript packages depend upon other packages and these other packages depend upon more packages and so on. It creates an enormous dependency graph. Your node modules folder contains all these packages. For example, eslint has many dependencies as you can see here. You don't have to worry about them if they are 180 MBs. Your final build won't be that large. It may be less than 1 MB depending upon your code.

It is usually not a practice to copy node modules directory along with your project. Because some packages may be installed depending on your operating system. Just keep package.json file whenever you need to move your project, and run npm install on the destination to build and install fresh packages.

Upvotes: 5

Related Questions