1. 路由模式
前端路由的原理主要在于通过改变URL而不重新加载页面的方式，实现页面的无刷新跳转。在单页应用（SPA）中，前端路由负责管理页面导航和URL的机制，提升用户体验。当URL发生变化时，前端路由会解析新的URL，找到对应的组件或内容，并动态地将其渲染到页面上。这样，用户看到的是页面的内容变化，而不是整个页面的重新加载。
前端路由的两种模型 hash 和 history 模式 ：
History模式：使用HTML5 History API来实现无锚点的URL，通过JavaScript动态更新URL，而不重新加载页面。这种模式下，URL看起来更像传统的网站地址，例如example.com/user?id=123。需要前端用上pushState和replaceState两个H5的api，来把url替换的同时又不刷新页面。但需要后端人员去配置url重定向的问题，不然在访问二级页面时，做刷新操作会报404的错误。
Hash模式：利用location.hash的值（即URL中#后面的部分）来管理路由。例如，example.com/#/user?id=123。这种模式下，URL看起来更像是传统的带有锚点的页面，但同样可以实现无刷新的页面跳转，哈希模式是打包部署推荐的模式，因为浏览器对其支持度非常广泛。
前端路由的应用场景和优势：前端路由广泛应用于单页应用中，特别是在需要快速响应用户操作、减少服务器请求、提升用户体验的场景中。其主要优势包括：
- 用户体验好：无需重新加载页面，用户体验流畅。
- 性能高：减少了服务器请求，加快了页面响应速度。
- 易于管理：通过JavaScript动态管理页面内容，便于维护和更新。
2. 项目分析优化
性能分析和体积优化 ，一些 js 文件的体积比较大 ，可能是 echarts 文件等图表文件 ；
2.1. 打开vue 的ui 界面
使用vue官方的分析工具 vue-ui 。
返回一个在线地址 GUI 打开
2. 导入项目文件
导入项目文件
3. 打包项目
开始打包
4. 打包结束就可以分析体积等参数了
文件不是大吗？我们就不要把这些大的文件和那些小的文件打包到一起了，像这种xlsx,element这种功能性很全的插件，我们可以放到CDN服务器上，一来，减轻整体包的大小，二来CDN的加速服务可以加快我们对于插件的访问速度
现在体积虽然小了，但是缺少相关插件 ，怎么办呢 ？ 使用 cdn 资源
ps：关于 publicPath 要使用相对路径 不能使用绝对路径
vu使用 CDN 资源的缺点
-
第三方服务器不稳定
-
后端人员部署麻烦
-
版本号可能对不上
-
插件的全局变量名不能够明确
所以不推荐使用cdn加载资源，除非特别要求。
3. 性能优化方式
- 代码压缩：使用工具如UglifyJS、Terser等来压缩JavaScript代码，移除不必要的空格、注释和未使用的代码，减少文件大小。
- 图片优化：使用合适的图片格式（如WebP、JPEG、PNG等），并对图片进行压缩，减少图片加载时间。另外，可以考虑使用CSS的
background-image代替<img>标签，或者使用SVG矢量图。 - 懒加载（Lazy Loading） ：对于非首屏或用户滚动后才能看到的图片、视频等资源，可以使用懒加载技术，当用户需要查看时再加载资源，减少首次加载时间。
- 减少HTTP请求：合并多个CSS或JavaScript文件，使用CSS Sprites等技术来减少HTTP请求的数量。同时，使用HTTP/2协议可以并行加载多个资源，提高加载速度。
- 使用CDN：CDN（内容分发网络）可以将静态资源缓存到离用户更近的服务器上，加快资源加载速度。
- 缓存：利用浏览器缓存机制，将静态资源缓存在用户浏览器中，减少重复请求。
- 优化DOM操作：尽量减少DOM操作的次数，使用DocumentFragment、离线DOM等技术来优化DOM操作性能。
