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

运行时依赖dependencies

1. 下载时 添加 -S/–save

npm install xxx --save

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

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

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

开发时依赖

1. 下载时 添加 -D/–save-dev

npm install xxx --save-dev

3. 此时在配置文件 package.json 的 “devDependencies” 添加对应的插件

  "devDependencies": {
    
    
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1"
    }

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

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