写文章
  1. 码农之家首页
  2. 前端教程

[前端进阶] 首屏优化知识梳理

我心飞翔 • • 前端教程 • 阅读 6

前言

首屏优化的重要性不用多说，是所有面向大众产品的一个硬核指标。这里带大家梳理下常用的首屏优化策略

无论你是使用webpack打包，还是vite打包，本文都列举了相关示例，希望对大家有帮助😀😀😀

一、体积优化

1. 路由懒加载

原理：使用import()函数语句，将路由组件打包成独立的模块。只有访问到对应路由时，才去加载对应的组件内容。这种方式可以有效地减少首次加载页面时需要加载的代码量，提高页面的加载速度。

示例：

const LoginPage = () => import('@/views/login/LoginPage.vue');

分析工具：

webpack使用webpack-bundle-analyzer进行分析；

vite使用rollup-plugin-visualizer进行分析；

效果图：

[前端进阶] 首屏优化知识梳理

可以看到各个路由组件都被分别打包进不同的js文件。后续也可根据此分析图来进行代码优化。

2. npm包按需导入

在项目中只引入所需的特定模块或功能，而不是引入整个包。这样可以减小项目的体积，提高加载速度

示例：Element Plus自动按需导入

  1. 安装插件
yarn add unplugin-vue-components unplugin-auto-import -D
  1. 配置vite.config.ts
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3. 提取公共包

当一个npm包在多个路由页面中被引用，vite和webpack都会把公共包提取到一个公共的chunk（块）中。例如vite会把公共包打包进index-hash.js中，如下图所示：

[前端进阶] 首屏优化知识梳理

现象：index-hash.js中包含了vue-i18n,vue-router，@vue等。在我的demo项目中，index-hash.js体积891KB，占比38.66%。在企业项目中，随着更多公共包的引入，体积只会越来越大。而且其中任何一个npm包进行了更新，文件的hash值就会改变，缓存失效，浏览器得重新从服务器下载资源

解决：webpack使用splitChunks，vite基于rollup使用manualChunks提取公共包

webpack：修改webpack.config.js，将echarts提取到名为echarts.vendor的js文件中

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 30000,
      name: false,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      cacheGroups: {
        "echarts.vendor": {
          name: "echarts.vendor",
          priority: 40,
          test: /[\/]node_modules[\/](echarts|zrender)[\/]/,
          chunks: "all",
        },
      },
    },
  },
};

vite：修改vite.config.ts，将vue，pinia，vue-router提取到名为vue的js文件中

export default () => {
  return defineConfig({
    //...
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            vue: ['vue', 'pinia', 'vue-router'],
          },
        },
      },
    },
  });
};

二、图片优化

1. 压缩图片

  1. 使用在线压缩图片网站手动压缩图片：tinypng.com

  2. 在构建流程中加入压缩图片插件，例如 image-webpack-loader

2. 转为webp图片

webp是谷歌推出的新图片格式（2010），与PNG，JPG相比，体积更小

  1. 使用在线网站webP-converter等手动压缩图片：cloudconvert.com/png-to-webp

  2. 使用插件自动化生成，例如 image-min-webp

一张420K的png图片，转为webp后，体积仅为24K，大约提升了94%。如果图片本身就比较小，就没有转webp的必要了。

兼容性：除了IE浏览器不支持外，其他浏览器支持度都还可以。这年头不会还有要支持IE的项目吧（手动狗头🤣）

[前端进阶] 首屏优化知识梳理

3. 使用字体图标代替图片

使用阿里字体图标库

4. 图片懒加载

  1. 将图片的src属性设置到占位符上，例如data-src

  2. 通过 IntersectionObserver 判断图片是否进入可视区域

  3. 进入可视区后，将占位符替换为真实的图片地址

或者直接使用第三方库，例如vue的vue-lazyload、react的vanilla-lazyload

三、传输优化

1. 脚本延迟加载

defer：异步加载，能保证执行顺序。在DOM解析之后，DOMContentLoaded触发之前执行

async：异步加载，不能保证执行顺序。浏览器会尽快解析和执行

示例：在index.html中引入public文件夹下三个本地资源 echarts.min.js，china.js与go.js

//index.html
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="/static/echarts.min.js"></script>
  <script src="/static/china.js"></script>
  <script src="/static/go.js"></script>
</body>

使用Performance进行分析：

[前端进阶] 首屏优化知识梳理

DOMContentLoaded用时439.13ms

现在给script标签增加异步加载标识，因为china.js依赖于echarts.min.js（需先加载完echarts.min.js），因此使用defer，go.js是个独立的第三方流程图模块，使用async

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="/static/echarts.min.js" defer></script>
  <script src="/static/china.js" defer></script>
  <script src="/static/go.js" async></script>
</body>

使用Performance进行分析：

[前端进阶] 首屏优化知识梳理

DOMContentLoaded用时220.98ms，少了接近一半的时间，提升很明显

2. 资源预加载

preload：预加载，预先下载本页面关键资源

prefetch：预加载，在浏览器空闲时预先下载其他页面可能要用到的资源

优先级：preload > prefetch

示例：在index.html中引入element-plus的css资源

<head>
  <link rel="stylesheet" href="//unpkg.com/element-plus@2.5.5/dist/index.css" />
</head>

使用Performance进行分析：

[前端进阶] 首屏优化知识梳理

DOMContentLoaded用时354.69ms

现在给link标签增加预加载标识，因为element-plus的css资源在登录页就需要用到，因此使用preload。如果是其他页面的资源，可以使用prefetch。

<head>
  <link rel="preload" href="//unpkg.com/element-plus@2.5.5/dist/index.css" as="style"/>
</head>

href：指定资源路径

as：指定资源类型

使用Performance进行分析：

[前端进阶] 首屏优化知识梳理

DOMContentLoaded用时166.31ms，少了接近一半的时间，提升很明显

3. DNS预连接

DNS预连接在DNS预解析的基础上，提前与目标服务器建立TCP连接，从而进一步加速页面的加载速度。

场景：提前解析跨源资源地址

<link rel="preconnect" href="https://example.com" />

4. 使用HTTP2

在HTTP1中，浏览器对于同一域名的请求数量是有限制的。例如同时请求6条，更多的http请求只能排队。而HTTP2引入了多路复用的技术，在同一TCP连接上并发多个请求和响应，很好的解决了这个问题

开启也很简单，以Nginx为例，在443端口后面添加http2即可

// nginx.conf
listen 443 http2;

之后重启Nginx，在NetWork面板，可以看到接口的Protocol栏看到h2

[前端进阶] 首屏优化知识梳理

5. 开启Gzip压缩

压缩文件体积，提高文件传输效率。gzip压缩通常能减少2/3的体积，例如echarts.min.js原741K，被压缩后只有184k。对于小文件，也能减少1/2的体积。

[前端进阶] 首屏优化知识梳理

配置Nginx

http{
  gzip on; # 是否开启gzip
  gzip_min_length  1k;# 开始压缩的最小长度(再小就不要压缩了,意义不在)
  gzip_buffers     4 16k; # 缓冲(压缩在内存中缓冲几块? 每块多大?)
  gzip_http_version 1.1;# 开始压缩的http协议版本(可以不设置,目前几乎全是1.1协议)
  gzip_comp_level 2;# 推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源)
  gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;# 对哪些类型的文件用压缩 如txt,xml,html ,css
  gzip_vary on; # 是否传输gzip压缩标志
  gzip_proxied   expired no-cache no-store private auth; #Nginx做为反向代理的时候启用 例如如果header中包含”Expires”头信息，启用压缩
  gzip_disable   "MSIE [1-6]\."; #正则匹配UA，配置禁用gzip条件。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
  gzip_static on; #开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
}

尽管Nginx已配置为在响应时压缩并返回Gzip格式的数据，但压缩操作会消耗服务器CPU资源和时间。压缩级别越高，资源消耗越大。因此，我们通常会上传已压缩的gzip文件，以便服务器直接返回，从而节省资源。Nginx配置：gzip_static on

构建时生成gzip文件

webpack

  1. 安装
yarn add compression-webpack-plugin -D
  1. 修改webpack.prod.js
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  plugins: [new CompressionPlugin()],
};

vite：

  1. 安装
yarn add vite-plugin-compression -D
  1. 修改vite.config.ts

默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用，使用 apply 属性指明它们仅在 ‘build’ 或 ‘serve’ 模式时调用

这里打包生成 .gz 插件仅需在打包时使用

import viteCompression from 'vite-plugin-compression'

  plugins: [
    //...
    {
      ...viteCompression(),
      apply: 'build',
    },
  ],

6. 使用CDN

CDN 加速原理：通过在网络不同节点部署缓存服务器，就近返回资源给用户，以提高网站的访问速度

示例：引入echarts

在index.html中使用cdn引入

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.4.0/echarts.min.js"></script>

使用CDN之后，还需配置externals(webpack)、external(vite)，告诉打包工具忽略对某些库的打包，因为这些库已经通过CDN链接在浏览器中直接引用了

webpack

修改webpack.common.js，配置externals

module.exports = {
  //...
  //externals中的key是用于import，value表示在全局中访问到该对象
  externals: {
    'echarts': 'echarts'
  },
};

vite

修改vite.config.ts，配置external

export default () => {
  return defineConfig({
    //...
    build: {
      rollupOptions: {
        //...
        external: ['echarts'],
      },
    },
  });
};

7. 服务端渲染（SSR）

服务器会预先生成完整的HTML页面，包括接口请求数据，然后将这个已经渲染好的页面直接返回给客户端。这样用户在首次访问页面时，可以直接看到已经渲染好的内容，而不需要等待客户端JavaScript代码加载和执行完毕后再进行渲染

熟悉Vue的，使用Nuxt

熟悉React的，使用Next

四、交互优化

1. 骨架屏

例如antd的官网首页，就使用了骨架屏

[前端进阶] 首屏优化知识梳理

2. loading动画

在JS没解析执行前，让用户能看到Loading动画，减轻等待焦虑。

示例：vue使用加载进度条

1.安装

yarn add nprogress

2.使用

import NProgress from 'nprogress';

import 'nprogress/nprogress.css';

//...省略其他路由配置相关代码

NProgress.configure({ showSpinner: false }); //关闭加载旋转器

//在路由全局前置钩子中开始
router.beforeEach((to) => {
  NProgress.start();
});

//在路由全局后置钩子中结束
router.afterEach(() => {
  NProgress.done();
});

例如对我的demo项目进行Performance分析，如下图所示：

[前端进阶] 首屏优化知识梳理

FP（First Paint）：首屏绘制为794.02ms

DCL（DOMContentLoaded）：HTML文档加载完成为1.57s

加载进度条在1s内就出现在了视野区，提升了用户的交互体验

示例：React使用旋转动画

import { Spin } from 'antd';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <Suspense fallback={<Spin delay={1000} size="large" />}>
    <RouterProvider router={router} />
  </Suspense>,
);

结尾

文本涉及的内容较多，包含vite，webpack，rollup，vue，react等，可参考我以前的文章结合阅读：

  1. Vue2性能优化

  2. webpack5详细教程（5.68.0版本）

  3. vue-router（4.1.6）最新使用指南

  4. Rollup炼金术：打造NPM包提高开发效率！

  5. 性能优化篇–Performance（工具）

  6. Vite4.3+Typescript+Vue3+Pinia 最新搭建企业级前端项目

  7. Vite5.0+Typescript+React18+Zustand 最新搭建企业级前端项目

近期文章推荐：

  1. 2种纯前端检测版本更新提示

  2. [React 进阶] 掌握 React18 全部 Hooks

  3. [React 进阶] 掌握 React TypeScript

  4. [Vite 进阶] 配置环境变量（包含多工程、多环境配置）

  5. 微信小程序《入门级教程》

原文链接：https://juejin.cn/post/7336822951273725978 作者：敲代码的彭于晏

赞 (0)
我心飞翔我心飞翔
0 0
上一篇 2024年2月19日 上午11:03
下一篇 2024年2月19日 上午11:13

相关推荐

发表回复

登录后才能评论