用不好包管理器的前端是入门级前端，用不好webpack的前端是初级前端。这三个包管理器可以一起使用。只要胆大心细，就没问题！推荐两篇文章手写React脚手架优化版手写Vue脚手架前端性能优化不全手册在JavaScript编写中，我们尽量不定义全局变量，在封装函数时尽量不要有副作用，因为所有变量的查询时间都会速度比局部变量慢，特别是考虑到它在Node环境下不能被垃圾回收的问题。老规矩先看npm原理npm是Node.js能够如此成功的主要原因之一。npm团队做了很多工作来确保npm保持向后兼容和跨环境的一致性。npm是围绕语义版本控制（semver）的思想设计的。给定一个版本号：主版本号。次版本号。补丁版本号，以下三种情况需要增加相应的版本号：主版本号：当API发生变化，与之前的版本号不兼容时的次要版本号：增加功能时，但向后兼容补丁版本号：做向后时兼容的缺陷修复，npm2将安装每个包依赖的所有依赖项。如果我们有一个项目依赖于项目A，项目A依赖于项目B，项目B又依赖于项目C，那么依赖树就会是这样的：这个结构可以很长。这在基于Unix的操作系统上只是一个小麻烦，但在Windows上却具有破坏性，因为有很多程序无法处理超过260个字符的文件路径名。npm3使用平面依赖树来解决这个问题，所以我们的3项目结构现在看起来是这样的：每个版本的tarball已经下载。本地缓存的内容可以通过npmcachels命令查看。本地缓存旨在帮助减少安装时间。这样，一个长文件路径名就从./node_modules/package-A/node_modules/package-B/node-modules/some-file-name-in-package-c.js变成了/node_modules/some-file-name-in-package-c.js。这种方法的缺点是npm在决定如何生成平面node_modules目录结构之前必须首先遍历所有项目依赖项。npm必须为所有使用到的模块构建一个完整的依赖树，这是一个耗时的操作，也是导致npm安装速度慢的一个很重要的原因。每次运行npminstall命令时，NPM都必须从Internet下载所有内容，这是理所当然的。但是npm有一个本地缓存，里面保存的是每个已经下载过的版本的压缩包。本地缓存的内容可以通过npmcachels命令查看。本地缓存旨在帮助减少安装时间。cnpmcnpm和npm完全一样，只是在执行命令的时候把npm改为cnpm。npm安装插件是从国外服务器下载的，受网络影响较大，可能会出现异常。如果npm服务器在国内就好了，所以淘宝团队就这么做了。来自官网：“这是一个完整的npmjs.org镜像，你可以用这个代替官方版本（只读），同步频率目前是每10分钟一次，以确保尽可能接近官方服务。”官方地址：http://npm。taobao.org安装：npminstall-gcnpm--registry=https://registry.npm.taobao.orgYarnYarn一开始的主要目标是解决上一节中描述的语义版本控制导致npm安装的不确定性性问题。虽然可以使用npmshrinkwrap来实现可预测的依赖树，但这不是默认选项，所有开发人员都必须了解并启用此选项。Yarn采用不同的方法。每个yarn安装都会生成一个类似于npm-shrinkwrap.json的yarn.lock文件，它是默认创建的。除了一般信息外，yarn.lock文件还包含正在安装的内容的校验和，以确保所使用的库版本相同。yarn是一个全新的npm客户端，经过重新设计，允许开发人员并行化所有必要的操作并添加一些其他改进。运行速度明显提升，整体安装时间变少和npm一样，yarn使用了本地缓存。与npm不同，yarn不需要互联网连接来安装本地缓存的依赖项，并且它提供离线模式。通常不建议通过npm安装允许组合项目中使用的所有包的许可证。npm安装是不确定的，包没有签名，并且npm除了基本的SHA1哈希之外不执行任何完整性检查，这会给安装系统程序带来安全风险。（笔者曾在一个有上百个依赖包的项目中使用npm丢包，成本很高，眼泪不知不觉掉了下来）先是看到一个非常失败的包下载，原来是从全局读取的资源（没有配置webpack别名是因为这条路径太长了）首先，我们先从原理说起。当我们使用npminit、yarninit和cnpminit时发生了什么？生成package.json文件。json文件内部声明了初始版本信息、作者信息等，如果需要作为命令行工具上传到npm，需要配置bin等声明入口字段。那么当我们使用npmi,yarnadd,cnpmi运行时会发生什么？首先会判断下载的包是放在全局环境下，还是放在当前包对应的node_module文件夹目录下。是因为在使用npm和cnpm的时候，没有标明添加的是全局依赖还是局部依赖，导致json文件上没有对应的包名，项目永远启动不了）然后根据你的命令--saveor-D,--save-dev判断是开发依赖还是在线依赖。其实yarn是没有问题的，因为yarn有自己的检查包完整性的机制，不会丢包，会自动判断是否添加依赖。bug很常见就是cnpm和npm，没有明确的-g或者--save，npm只有检查程序员签名的机制，没有检查包完整性的机制，不会自动添加依赖到json文件，那么就会有丢包的错觉。所以建议主要使用yarnyarn和npm来比较npm的缺点：同一个项目在安装时无法保持一致性。由于package.json文件中版本号的特点，下面三个版本号在安装时代表的含义不同。"5.0.3","~5.0.3","^5.0.3""5.0.3"表示安装指定版本5.0.3，"~5.0.3"表示安装5.0.X中的最新版本,"^5.0.3"表示安装5.X.X最新版本。这很麻烦。同一个项目经常出现，有的同事还可以，有的同事可能因为安装的版本不一致导致bug。安装的时候，包是同时下载安装的，中间某个时候一个包报错，但是npm继续下载安装包。因为npm将其所有日志记录到终端，所以有关错误包的错误消息会丢失在npm打印的警告海洋中，您甚至不会注意到实际出了什么问题。yarn的优点是速度快。速度快主要来自以下两个方面：并行安装：无论是npm还是Yarn执行包的安装，都会执行一系列的任务。npm是按照队列来执行每个包的，也就是说必须先完成当前包的安装，才能继续进行后续的安装。另一方面，Yarn并行执行所有任务，从而提高性能。离线模式：如果之前安装过某个软件包，再次使用Yarn安装时会从缓存中获取，不需要像npm那样从网络下载。统一安装版本：为了防止不同版本被拉取，Yarn有一个锁文件（lockfile），记录了恰好安装的模块的版本号。每次添加新模块时，Yarn都会创建（或更新）yarn.lock文件。这确保每次拉取相同的项目依赖项时都使用相同的模块版本。其实npm也有办法让到处都使用同一个版本的包，只是需要开发者执行npmshrinkwrap命令。此命令将生成一个锁定文件。执行npminstall时，会先读取lock文件，就像Yarn读取yarn.lock文件一样。npm和Yarn的区别在于Yarn默认会生成这样一个锁文件，而npm需要通过shrinkwrap命令生成npm-shrinkwrap.json文件。只有当这个文件存在时，包的版本信息才会被记录和更新。更简洁的输出：npm的输出是冗长的。当执行npminstall
