在Angular开发里，我们经常能见到vendor.js,那么你有想过她的作用吗？当我们项目越来越大的时候，是否发现首次加载 会偶现卡顿 ？尤其是旧的电脑，但是第二次就很快 ，那么要如何优化呢？
一、vendor.js是什么？
在Angular中，vendor.js 是由Angular CLI生成的一个文件。它包含了所有的第三方依赖库 和框架，在应用程序加载时会被预先加载并缓存，以提供更快的启动时间和更好的性能。
vendor.js在构建应用程序时会由Angular CLI自动生成，并且会根据应用程序的具体配置和使用的库进行动态地调整和更新。
二、vendor.js包括了哪些依赖库和框架？
vendor.js文件包含了应用程序所依赖的所有库和框架，包括Angular框架本身、RxJS、zone.js、 Reflect Metadata等。因此将它们打包到一个单独的文件中有助于减小应用程序的体积，并且可以通过HTTP缓存机制进行更好的优化。
三、vendor.js的作用是什么？
**1、依赖打包：**将所有这些依赖库打包成一个文件
2、提高性能： 依赖统一打包，减少 应用程序加载 时的网络请求次数，提高应用程序的性能。
3、缓存提速： 由于vendor.js文件中的代码不经常改变，可以使用浏览器缓存 来提高再次加载 时的速度。（ 是否发现项目越来越大的时候，首次打开页面会偶现卡顿，第二次加载 却非常快呢？ 这是因为第二次使用 的是缓存 ，自然速度很快**）**
4、自动添加执行： 在Angular项目中，通常会使用工具如Webpack或者Angular CLI来生成vendor.js文件 。这个文件会被自动添加到index.html 页面中的script标签 中，并在应用程序加载时自动被加载和执行。
四、vendor.js加载卡顿，如何优化？
当项目越来越大 ，依赖越来越多 的时候，有时候首次加载卡顿，尤其是网络不好，或者使用比较旧的电脑的时候，其实就是因为所有的依赖 都打包成了一个vendor.js文件 ，导致依赖包过大，所以首次加载时间会相对久,那么要如何优化呢？
1、减少vendor.js的大小 ：检查vendor.js是否包含了不必要的依赖或重复的代码，可以通过删除多余 的依赖 或使用压缩工具 来减少文件大小。
2、按需加载： 将vendor.js拆分 为多个小文件，并按需加载。例如，如果页面只需要部分功能，可以根据需要加载对应的依赖，而不是一次性加载所有依赖。
3、使用CDN加速： 将vendor.js文件上传到CDN（内容分发网络）上，可以通过接近用户的服务器来提供更快的下载速度，减少加载卡顿。
4、缓存： 使用合适 的缓存策略来缓存vendor.js文件，使得用户在下次访问页面时可以直接从缓存中读取，而不是重新下载。
5、懒加载：延迟加载vendor.js文件 ，只有在页面需要使用到vendor.js中的功能时再进行加载，可以通过异步加载 或使用动态脚本插入来实现。
6、使用webpack等工具进行代码优化： 通过使用工具如webpack等进行代码压缩、代码分割等优化操作，可以减小vendor.js文件大小，并提升加载速度。