Vue入门到精通五之yarn部署项目

什么是Yarn

Yarn 是一个快速、可靠、安全的 JavaScript 包管理器,由 Facebook、Google、Exponent 和 Tilde 联合开发,用于替代 npm。

核心价值

维度 优势 解决痛点
速度 并行安装、缓存机制 npm 串行安装慢
可靠性 锁文件 yarn.lock 跨环境依赖版本一致
安全性 校验包完整性 防止包被篡改
离线能力 缓存已安装包 无网时可复用缓存

关键机制

1. 并行安装

复制代码
Yarn: [A][B][C][D] 同时下载(多线程)
npm:  [A]→[B]→[C]→[D] 顺序下载(单线程)

2. 锁文件(yarn.lock)

复制代码
# yarn.lock 示例
vue@3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0.tgz"
  integrity sha512-xxx
  dependencies:
    "@vue/shared" "^3.0.0"

作用:确保团队所有成员安装的依赖版本完全一致

对比 npm

特性 Yarn npm
安装速度 更快(并行) 较慢(串行)
锁文件 yarn.lock(默认) package-lock.json(npm 5+)
工作空间 原生支持(Monorepo) npm workspaces(较晚支持)
离线安装 原生支持 有限支持
缓存 全局缓存 局部缓存

核心命令对比

操作 Yarn npm
初始化 yarn init npm init
安装依赖 yarn install npm install
添加依赖 yarn add <包> npm install <包>
添加开发依赖 yarn add <包> -D npm install <包> --save-dev
删除依赖 yarn remove <包> npm uninstall <包>
运行脚本 yarn run <脚本> npm run <脚本>
全局安装 yarn global add <包> npm install -g <包>

使用场景

大型项目

  • Monorepo 架构(如多个子项目共享依赖)
  • 依赖包数量多(1000+),需要快速安装

团队协作

  • 强调跨环境一致性(CI/CD、开发/生产环境)

性能敏感

  • CI/CD 流程中依赖安装时间过长

离线需求

  • 内网环境或不稳定的网络环境

实际案例

场景:优化 CI/CD 构建时间

原方案(npm):

复制代码
npm install  # 耗时 3分钟

改用 Yarn:

复制代码
yarn install  # 耗时 45秒(缓存命中)

时间节省:75%

💡 现实建议

场景 推荐工具
新项目、追求速度 Yarn
遗留项目、团队习惯 保持现有工具
Monorepo Yarn 或 pnpm
极简需求 npm(已足够)

实战部署

这里我们部署一个 广告后台管理的项目,命令如下:

bash 复制代码
yangyanping@yangyaningdeAir ad_admin % yarn cache clean
yarn cache v1.22.22
success Cleared cache.
✨  Done in 6.09s.
yangyanping@yangyaningdeAir ad_admin % yarn install
yarn install v1.22.22
[1/4] 🔍  Resolving packages...
success Already up-to-date.
$ husky install
husky - Git hooks installed
✨  Done in 3.96s.
yangyanping@yangyaningdeAir ad_admin % yarn serve
yarn run v1.22.22
$ vue-cli-service serve
 INFO  Starting development server...
[92%] sealing (asset processing ThemeColorReplacer)


 DONE  Compiled successfully in 13157ms                                                                              22:47:29


  App running at:
  - Local:   http://localhost:8011/ 
  - Network: http://192.168.31.90:8011/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
相关推荐
前端柱子几秒前
q-floodfill白边锯齿?一招搞定抗锯齿边缘问题
前端
阿虎儿2 分钟前
我的 HTML 样板(HTML Boilerplate)
前端·html
Amos_Web6 分钟前
Rspack 源码解析(八):Module、Chunk 与 Runtime ID
前端·rust·源码阅读
彭于晏分晏12 分钟前
深入理解 Vue 3 响应式原理:从 Proxy 到依赖收集
前端
晚安日记wanna15 分钟前
Vue3 script setup 的四层追问答到第三层才算过关
前端·vue.js·面试
前端柱子21 分钟前
Chaikin‘s Corner Cutting 算法 应用canvas绘制平滑的曲线
前端
gnip24 分钟前
uts 插件示例:获取设备电量信息
前端·javascript
码上成长29 分钟前
Mapbox 上用 Turf 裁多边形:屏幕贴边了,接口却说越界
前端·前端框架
计算机魔术师34 分钟前
纽约时报告了OpenAI和微软:820万条聊天记录背后,是AI时代最大的版权保卫战
前端
码事漫谈41 分钟前
在 Kubernetes 上管好数据库:金仓 KES-Operator 正式落地
前端·后端