记录关于页面加载优化

满圆圆
79 阅读3分钟

本篇文章记录对于项目中加载的一些优化相关处理。

1、路由懒加载

Vue

vue实现路由懒加载可以通过：

1、安装vue Router4,使用Vue Router的defineAsyncComponent函数或直接使用动态导入语法来懒加载组 件。

import { createRouter, createWebHistory } from 'vue-router';

// 使用动态导入语法实现懒加载
const Home = () => import(/* webpackChunkName: "home" */ '../views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ '../views/About.vue');

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

React

在 React16 中我们通常在路由懒加载中Suspense配合 Lazy 组件一起使用

主要是：使用React.lazy()导入组件、利用Suspense组件包裹懒加载组件以及配置路由

第一步：引入react.lazy

const HomePage = React.lazy(() => import('./HomePage'));

利用React.lazy()，我们定义一个动态导入的组件,这段代码意味着HomePage组件将作为一个懒加载组件导入

第二步：使用suspense协调调用懒加载

React.lazy()允许我们动态导入组件，在组件加载期间，我们需要提供一个加载指示或者降级组件来改善用户体验。

Suspense: Suspense组件主要用于代码分割和延迟加载通过Suspense组件，可以实现在组件树中等待异步加载的组件，从而实现更好的用户体验

当异步加载的组件尚未完成加载时，Suspense会显示fallback指定的占位符内容

  1. 代码分割
  2. 延迟加载
  3. 错误处理

2、组件懒加载

比如弹窗用于懒加载的方式引入

const dialogInfo = () => import(/* webpackChunkName: "dialogInfo" */ '@/components/dialogInfo');

组件懒加载的使用场景

  1. 该页面的 JS 文件体积大，导致页面打开慢，可以通过组件懒加载进行资源拆分，
  2. 该组件不是一进入页面就展示，需要一定条件下才触发（比如弹框组件）
  3. 该组件复用性高，很多页面都有引入，利用组件懒加载抽离出该组件，一方面可以很好利用缓存，同时也可以减少页面的 JS 文件大小（比如表格组件、图形组件等）

3、使用骨架屏

现在很多h5/pc页面，都采用了骨架屏的方式，可以缩短白屏时间，提升用户体验。

4、JS 的加载方式

async、defer 是 script 标签的专属属性，对于网页中的其他资源，可以通过 link 的 preload、prefetch 属性来预加载

现在很多框架可以灵活配置，使用预加载的功能，现代框架已经将 preload、prefetch 添加到打包流程中了。

5、部分图片可以使用懒加载

懒加载：等滚动到可视区域的时候，再去加载图片。 压缩图片：在上线前把图片压缩 使用svg: 静态图可以换成svg的格式，减小体积 使用webp： 现在webp的格式兼容较好，体积也更小

6、使用防抖和节流

都是为了减少http请求，减轻客户端压力

7、适当使用memo-----React

react的渲染机制，只要父组件的state改变，那么不论子组件是否发生改变。子组件都会重新渲染。

这个问题可以由React中的memo解决。memo是一个缓存组件。使用memo包含子组件，那么在memo的依赖不改变的情况下。子组件不会随着父组件的渲染而重新渲染。

比如父组件如果不存在重新渲染的情况，那么子组件就没有必要用memo包含。

8、moment.js换成day.js

day.js的体积比moment.js小。moment.js有70多kb，但是day.js只有2kb。

avatar
文章
阅读
粉丝