前端运行时依赖和开发时依赖的区别

1、运行时依赖 dependencies

1、下载时 添加 -S/--save

npm install vuex@next --save

2、此时在配置文件 package.json 中 "dependencies" 添加对应的插件

 "dependencies": {
    "vue": "^3.2.25",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2"
  },

3、作用

安装时依赖包括 vuex等插件，这些插件在运行的时候使用。

2、开发时依赖 devDependencies

1、下载时 添加 -D/--save-dev

npm install xxx --save-dev

2、此时在配置文件 package.json 的 "devDependencies" 添加对应的插件

 "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "vite": "^2.7.2"
  }

3、作用

开发依赖还包括 webpack、webpack-cli、rollup 等构建工具，less cass等预处理器、测试工具等等，只在开发的时候使用 、在项目运行的时候不需要。

开发依赖的目的是为了减少插件在安装依赖时node_modules的所占的内存，提升安装依赖的速度，节省线上及其的硬盘资源以及部署上线的时间。