hgq's docs
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)

guoguoqiqi

漫不经心的向往
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)
  • webpack是什么、为什么选择它
  • webpack中module、chunk和bundle的概念
  • 说一下在webpack中的loader和plugin的不同
  • webpack 三种hash的区别
  • webpack基本核心概念
  • webpack工作机制
  • 常用的Loader
  • 常用的Plugin
  • webpack配置与优化实践
  • webpack热更新原理
  • 如何配置webpack热更新
  • 如何提升webpack构建速度
  • babel中polyfill的作用
  • npm和yarn的对比
    • 如何减小打包体积提高页面加载速度
    • 介绍SourceMap
    • 搭建一个前端工程
    • 自定义loader
    • 自定义plugin
    • 相关面试题集合
    • 相关文档网站
    • 对比一下webpack、vite、rollup等构建工具.md
    • loader、plugin的区别,以及编写的思路
    • css-loader和style-loader的区别
    • url-loader和file-loader的区别
    • webpack代码分割和公共代码提取
    • Webpack
    guoguoqiqi
    2022-02-15

    npm和yarn的对比

    # npm和yarn的对比

    # npm的特点

    • npm install的时候很慢。特别是新的项目拉下来要等半天,删除node_modules,重新install的时候依旧如此。

    • 同一个项目,安装的时候无法保持一致性。由于package.json文件中版本号的特点,下面三个版本号在安装的时候代表不同的含义

      1. 5.0.3 安装指定的5.0.3版本
      2. ~5.0.3 安装5.0.X中最新的版本
      3. ^5.0.3 安装5.X.X中最新的版本
    • npm 的输出信息比较冗长。在执行 npm install package 的时候,命令行里会不断地打印出所有被安装上的依赖。

    # yarn的优点

    • 速度快:

      速度快主要来自以下两个方面:

      1. npm和 yarn 在执行包的安装时,都会执行一系列任务。npm 是按照队列执行每个 package,必须要等到当前 package 安装完成之后,才能继续后面的安装。而yarn 是同步执行所有任务,提高了性能。

      2. 离线模式:如果之前已经安装过一个软件包,用yarn再次安装时之间从缓存中获取,就不用像npm那样再从网络下载了。

    • 安装版本统一:

      为了防止拉取到不同的版本,Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块,Yarn 就会创建(或更新)yarn.lock 这个文件。这么做就保证了,每一次拉取同一个项目依赖时,使用的都是一样的模块版本。npm 其实也有办法实现处处使用相同版本的 packages,但需要开发者执行 npm shrinkwrap 命令。这个命令将会生成一个锁定文件,在执行 npm install 的时候,该锁定文件会先被读取,和 Yarn 读取 yarn.lock 文件一个道理。npm 和 Yarn 两者的不同之处在于,Yarn 默认会生成这样的锁定文件,而 npm 要通过 shrinkwrap 命令生成 npm-shrinkwrap.json 文件,只有当这个文件存在的时候,packages 版本信息才会被记录和更新。

    • 更简洁的输出:

      npm 的输出信息比较冗长。在执行 npm install 的时候,命令行里会不断地打印出所有被安装上的依赖。相比之下,yarn 简洁太多:默认情况下,结合了 emoji直观且直接地打印出必要的信息,也提供了一些命令供开发者查询额外的安装信息。

    • 多注册来源处理:

      所有的依赖包,不管他被不同的库间接关联引用多少次,安装这个包时,只会从一个注册来源去装,要么是 npm 要么是 bower, 防止出现混乱不一致。

    • 更好的语义化:

      yarn改变了一些npm命令的名称,比如 yarn add/remove,感觉上比 npm 原本的 install/uninstall 要更清晰。

    # npm和yarn命令对比

    npm yarn
    npm install yarn
    npm install react --save yarn add react
    npm uninstall react --save yarn remove react
    npm install react --save-dev yarn add react --dev
    npm update --save yarn upgrade

    # 参考文章链接

    npm/yarn lock真香 (opens new window)
    面试官:听说你对package.json很熟? (opens new window)
    npm和yarn的区别,我们该如何选择? (opens new window)
    yarn和npm的对比 (opens new window)

    ← babel中polyfill的作用 如何减小打包体积提高页面加载速度→

    最近更新
    01
    vuex数据持久化怎么做
    05-22
    02
    vue的动态路由怎么配置使用
    05-22
    03
    vue权限控制一般怎么做
    05-22
    更多文章>
    Theme by Vdoing | Copyright © 2022-2022 Guoquoqiqi | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式