共计 4141 个字符,预计需要花费 11 分钟才能阅读完成。
指标: 继续输入!每日分享对于 web 前端常见常识、面试题、性能优化、新技术等方面的内容。
次要面向群体:前端开发工程师(初、中、高级)、应届、转行、培训等同学
Day4- 今日话题
明天分享的是前端路由的进阶篇,将从 路由的实现原理 、 路由懒加载 、 路由预加载 等多方面介绍。
路由实现原理
前端路由的实现原理基本上是 通过监听浏览器的 URL 变动,而后依据不同的 URL 门路来渲染不同的视图组件,从而实现页面切换和导航
。这种机制使得在单页利用(Single Page Application,SPA)中可能实现无需刷新整个页面而只更新局部内容的成果,从而晋升用户体验。
次要的原理步骤如下:
1. 初始化路由配置 在利用启动时,配置所有可能的门路和其对应的组件,这就形成了路由表。
2. 监听 URL 变动 前端框架会监听浏览器的 URL 变动,通常是通过浏览器提供的 popstate 事件或 hashchange 事件来实现。
3. 解析 URL 框架会解析以后 URL,提取出门路和可能的查问参数、哈希等信息。
4. 匹配路由 框架会依据解析到的门路,在路由表中查找匹配的路由配置。
5. 渲染组件 找到匹配的路由配置后,相应的组件会被加载和渲染到页面中,实现页面切换。
6. 更新 URL 如果反对历史模式的路由,框架可能会应用 pushState 或 replaceState 办法来更新 URL,以放弃 URL 与以后页面状态的一致性。
路由懒加载
路由懒加载(Route Lazy Loading)是一种前端优化技术,它容许在须要时才加载特定页面的代码和资源,以缩小初始页面加载工夫。懒加载能够进步初始加载速度,因为不会一次性加载所有页面的代码,而是依据须要动静加载。这种技术在单页利用(SPA)中尤其有用,因为它们通常会有多个页面组件。
长处:
- 缩小初始加载工夫: 懒加载只加载以后页面所需的代码,缩小了初始加载工夫,进步了用户体验。
- 升高初始负载: 初始加载的代码量减少,加重了服务器和网络的累赘。
- 节俭带宽: 懒加载能够防止一次性加载不必要的代码,节俭了带宽。
毛病:
- 加载提早: 当用户首次导航到一个新页面时,会产生短暂的加载提早,因为须要先加载该页面的代码和资源。
- 代码宰割减少: 如果没有适当地划分代码,可能会导致过多的代码宰割,减少了保护的复杂性。
在 Vue 和 React 我的项目中的实现:
在 Vue2 我的项目中实现路由懒加载:
Vue 提供了 import()
函数,能够在组件须要的时候动静加载代码。这能够通过在路由配置的 component
字段中应用 () => import()
语法来实现。
const routes = [ | |
{ | |
path: '/home', | |
component: () => import('./views/Home.vue') | |
} | |
]; |
在 Vue3 我的项目中实现路由懒加载:
在 Vue 3 中,路由懒加载的实现形式与 Vue 2 有所不同。Vue 3 引入了 defineAsyncComponent
函数来更不便地定义异步组件,这也影响了路由懒加载的写法。以下是在 Vue 3 中实现路由懒加载的示例:
import {createRouter, createWebHistory} from 'vue-router'; | |
import {defineAsyncComponent} from 'vue'; | |
const routes = [ | |
{ | |
path: '/', | |
component: defineAsyncComponent(() => import('./views/Home.vue')) | |
}, | |
{ | |
path: '/about', | |
component: defineAsyncComponent(() => import('./views/About.vue')) | |
}, | |
// 其余路由配置 | |
]; | |
const router = createRouter({history: createWebHistory(), | |
routes | |
}); | |
export default router; |
在这个示例中,咱们应用了 Vue 3 提供的 defineAsyncComponent
函数来创立异步组件。在路由配置中,咱们将 component
属性的值设置为 defineAsyncComponent
的调用,传入一个返回 import()
的函数,从而实现了路由的懒加载。
在 React 我的项目中实现路由懒加载:
在 React 中,你能够应用 React.lazy()
函数来实现组件的懒加载。懒加载的组件须要与 Suspense
组件一起应用。
import React, {lazy, Suspense} from 'react'; | |
import {BrowserRouter as Router, Route} from 'react-router-dom'; | |
const Home = lazy(() => import('./views/Home')); | |
function App() { | |
return ( | |
<Router> | |
<Suspense fallback={<div>Loading...</div>}> | |
<Route path="/home" component={Home} /> | |
</Suspense> | |
</Router> | |
); | |
} |
以上的代码示例中,import()
或 React.lazy()
函数会在须要时按需加载对应的组件。在懒加载的组件加载实现之前,能够应用 Suspense
组件来显示加载中的状态。
总的来说,路由懒加载是一种优化技术,容许在须要时才加载页面的代码和资源,以进步初始加载速度。在 Vue 和 React 我的项目中,你能够通过应用特定的语法和函数来实现懒加载,从而晋升利用的性能和用户体验。
路由预加载
路由预加载是一种优化技术,它容许在用户拜访特定页面之前事后加载该页面所需的资源,以晋升页面切换时的加载速度。通常,当用户浏览某个页面时,前端会在后盾异步加载该页面所需的 JavaScript、CSS 和其余资源,以便在用户理论拜访该页面时可能更快地出现内容。
长处:
- 晋升加载速度: 预加载使得页面的必要资源能够在用户导航到该页面之前提前加载,从而缩小理论加载工夫。
- 晋升用户体验: 用户在点击链接或导航到新页面时,页面能够更迅速地展现内容,晋升整体用户体验。
- 缩小提早: 预加载能够缩小网络申请的提早,因为资源曾经在后盾加载结束。
毛病:
- 资源节约: 预加载可能会加载一些用户实际上并不会拜访的资源,造成资源节约。
- 网络开销: 如果适度预加载大量页面,可能会减少网络开销和服务器累赘。
- 性能问题: 如果预加载资源过多或者在不适合的工夫加载,可能会影响利用的性能。
在 Vue 和 React 我的项目中的实现:
在 Vue2 我的项目中实现路由预加载:
Vue 提供了一个非凡的 webpackChunkName
正文,容许你为预加载的 chunk 命名。同时,你能够在路由配置的 meta
字段中设置一个标记,而后在路由导航前应用动静 import()
办法来触发预加载。
const routes = [ | |
{ | |
path: '/home', | |
component: () => import(/* webpackChunkName: "home" */ './views/Home.vue'), | |
meta: {preload: true} // 设置预加载标记 | |
} | |
]; | |
router.beforeEach((to, from, next) => {if (to.meta.preload) {const component = to.component(); | |
component.then(() => next()); | |
} else {next(); | |
} | |
}); |
在 Vue3 我的项目中实现路由预加载:
在 Vue 3 中,能够应用异步组件的 defineAsyncComponent
函数来更简洁地实现预加载。同时,Vue Router 也提供了一种更优雅的形式来实现路由预加载。
import {createRouter, createWebHistory} from 'vue-router'; | |
import {defineAsyncComponent} from 'vue'; | |
const routes = [ | |
{ | |
path: '/home', | |
component: defineAsyncComponent(() => import('./views/Home.vue')), | |
meta: {preload: true} // 设置预加载标记 | |
}, | |
// 其余路由配置 | |
]; | |
const router = createRouter({history: createWebHistory(), | |
routes | |
}); | |
router.beforeEach(async (to, from, next) => {if (to.meta.preload) {await to.matched[0].components.default();} | |
next();}); | |
export default router; |
在这个改良的实现中,咱们应用了 Vue 3 的新性能 defineAsyncComponent
来创立异步组件,使代码更简洁。在 beforeEach
钩子中,咱们应用 await
关键字来期待组件加载实现。
在 React 我的项目中实现路由预加载:
在 React 我的项目中,你能够应用 <link>
标签的 rel
属性来触发预加载。
import React from 'react'; | |
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'; | |
const Home = React.lazy(() => import('./views/Home')); | |
function App() { | |
return ( | |
<Router> | |
<nav> | |
<Link rel="preload" to="/home">Home</Link> | |
</nav> | |
<React.Suspense fallback={<div>Loading...</div>}> | |
<Route path="/home" component={Home} /> | |
</React.Suspense> | |
</Router> | |
); | |
} |
总之,路由预加载是一种优化技术,容许在用户拜访特定页面之前事后加载页面所需的资源,以晋升页面切换的加载速度和用户体验。在 Vue 和 React 我的项目中,能够通过配置和应用特定的 API 来实现路由预加载。
下一篇文章将分享React 相干的知识点,欢送点赞、关注、转发~
本文由 mdnice 多平台公布