55、⾸屏加载⽩屏怎么进⾏优化-CSDN博客

本文链接：https://blog.csdn.net/qq_45600165/article/details/147324779

答：

(1使⽤CDN 减⼩代码体积，加快请求速度；

(2)SSR通过服务端把所有数据全部渲染完成再返回给客⼾端；

(3)路由懒加载，当⽤⼾访问的时候，再加载相应模块；

(4)使⽤外链CSS，JS⽂件；

(5)开启 GZIP压缩；（是⼀种 http 请求优化⽅式，通过减少⽂件体积来提⾼加载速度。 html、js、css ⽂件甚⾄json数据都可以⽤它压缩，可以减⼩60%以上的体积。（需要后端⽀持））

(6) 项⽬打包不⽣成.map ⽂件；

(7)使⽤⻣架屏在⾸⻚加载时，显⽰⻚⾯结构轮廓；

1. 使用 CDN 减小代码体积，加快请求速度

CDN 即内容分发网络，它由分布在全球各地的服务器节点构成。当用户请求网页资源时，CDN 会自动选择距离用户最近、响应速度最快的服务器来提供服务。

使用 CDN 有以下优点：

减小代码体积：CDN 通常会对所提供的资源（如 JavaScript、CSS 库等）进行优化和压缩，去除不必要的空格、注释等，从而减小文件体积。
加快请求速度：由于服务器节点分布广泛，用户能就近获取资源，减少了数据传输的距离和时间，大大提高了请求响应速度。
例如，在 HTML 中引入 jQuery 库时，可以使用 CDN 链接：

html

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

2. SSR 通过服务端把所有数据全部渲染完成再返回给客户端

SSR 即服务器端渲染，传统的前端渲染是在客户端（浏览器）完成页面的渲染，而 SSR 是在服务器端将页面所需的数据和 HTML 结构进行组合，生成完整的 HTML 页面后再发送给客户端。

其优势在于：

首屏加载速度快：客户端直接接收到完整的 HTML 页面，无需等待 JavaScript 代码在浏览器中执行和数据请求，可快速显示页面内容。
有利于 SEO：搜索引擎爬虫可以直接抓取到完整的 HTML 内容，提高网站在搜索引擎中的排名。
以 Node.js 和 Express 框架结合 React 进行 SSR 为例，基本步骤如下：

javascript

// 服务端代码
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // 假设这是你的React组件

const app = express();

app.get('/', (req, res) => {
    const html = ReactDOMServer.renderToString(<App />);
    res.send(`
        <!DOCTYPE html>
        <html>
            <head>
                <title>SSR Example</title>
            </head>
            <body>
                <div id="root">${html}</div>
                <script src="client.js"></script>
            </body>
        </html>
    `);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

3. 路由懒加载，当用户访问的时候，再加载相应模块

路由懒加载是一种优化策略，它会将应用的不同路由模块分割成多个小的文件，在用户访问到特定路由时才去加载对应的模块。

好处有：

减少初始加载时间：避免在应用启动时一次性加载所有的代码，减少初始加载的文件体积，加快页面的初始加载速度。
节省带宽：用户可能只访问部分页面，只加载他们需要的模块，节省了不必要的带宽消耗。
在 Vue.js 中使用路由懒加载的示例如下：

javascript

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('./views/Home.vue') // 懒加载组件
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('./views/About.vue') // 懒加载组件
    }
];

const router = new VueRouter({
    routes
});

export default router;

4. 使用外链 CSS，JS 文件

将 CSS 和 JS 代码放在外部文件中，然后在 HTML 文件中通过链接引入，这样做的好处有：

缓存利用：浏览器会对外部的 CSS 和 JS 文件进行缓存，当用户再次访问该网站时，如果文件没有更新，浏览器可以直接从缓存中读取，减少了请求和下载时间。
代码可维护性：将不同类型的代码分离，使代码结构更清晰，便于开发和维护。
例如，在 HTML 中引入外部 CSS 和 JS 文件：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="script.js"></script>
</body>
</html>

5. 开启 GZIP 压缩

GZIP 是一种数据压缩算法，开启 GZIP 压缩后，服务器在发送文件之前会先对文件进行压缩，减小文件体积，然后再传输给客户端，客户端接收到压缩文件后再进行解压缩。

优点如下：

减少传输时间：压缩后的文件体积大幅减小，可显著缩短数据传输时间，尤其是对于大文件（如 HTML、CSS、JS 等），可以减少 60% 以上的体积。
节省带宽：降低了服务器和客户端之间的数据传输量，节省了带宽资源。
在 Node.js 中使用 Express 框架开启 GZIP 压缩的示例：

javascript

const express = require('express');
const compression = require('compression');

const app = express();

// 使用compression中间件开启GZIP压缩
app.use(compression());

app.get('/', (req, res) => {
    res.send('Hello, World!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

6. 项目打包不生成.map 文件

.map 文件即源映射文件，它是一种将压缩后的代码映射回原始源代码的文件，主要用于调试。在生产环境中，通常不需要这些.map 文件。

不生成.map 文件的好处：

减小文件体积：.map 文件通常比较大，不生成它们可以显著减小打包后的文件体积，加快文件的下载速度。
提高安全性：.map 文件会暴露原始代码的结构和内容，不生成可以减少代码泄露的风险。
在 Vue 项目中，通过修改vue.config.js文件来禁止生成.map 文件：

javascript

module.exports = {
    productionSourceMap: false
};

7. 使用骨架屏在首页加载时，显示页面结构轮廓

骨架屏是一种在页面内容加载完成之前，先展示页面大致结构的占位图。

其作用有：

提升用户体验：在数据加载过程中，用户可以看到页面的大致轮廓，减少等待的焦虑感，让用户感觉页面加载速度更快。
过渡自然：当数据加载完成后，骨架屏会平滑地过渡到真实内容，使页面切换更加自然。
在 React 项目中实现简单骨架屏的示例：

jsx

import React, { useState, useEffect } from 'react';

const Skeleton = () => {
    return (
        <div className="skeleton">
            <div className="skeleton-header"></div>
            <div className="skeleton-content"></div>
        </div>
    );
};

const App = () => {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        // 模拟数据加载
        setTimeout(() => {
            setIsLoading(false);
        }, 2000);
    }, []);

    return (
        <div>
            {isLoading ? <Skeleton /> : <div>真实内容</div>}
        </div>
    );
};

export default App;

css

.skeleton {
    width: 100%;
    height: 100vh;
}

.skeleton-header {
    width: 100%;
    height: 50px;
    background-color: #f0f0f0;
    margin-bottom: 10px;
}

.skeleton-content {
    width: 100%;
    height: 200px;
    background-color: #f0f0f0;
}