你了解Angular里的vendor.js吗?

在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文件大小,并提升加载速度。

相关推荐
brzhang1 天前
为什么 OpenAI 不让 LLM 生成 UI?深度解析 OpenAI Apps SDK 背后的新一代交互范式
前端·后端·架构
brzhang1 天前
OpenAI Apps SDK ,一个好的 App,不是让用户知道它该怎么用,而是让用户自然地知道自己在做什么。
前端·后端·架构
爱看书的小沐1 天前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
井柏然1 天前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
IT_陈寒1 天前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
aklry1 天前
elpis之动态组件机制
javascript·vue.js·架构
井柏然1 天前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊1 天前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang1 天前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..1 天前
通过git拉取前端项目
java·前端·git·vscode·拉取代码