前端性能优化笔记1 第一章

沿着路走到底

已于 2023-03-08 20:41:42 修改

阅读量753

点赞数

分类专栏：性能优化文章标签：前端

于 2023-03-07 22:30:53 首次发布

本文链接：https://blog.csdn.net/m0_38066007/article/details/129390669

版权

性能优化专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1. Hello World

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
  <script>
    window.LOAD_DATA = (data) => {
      const { title, url } = data
      document.body.innerHTML = `<h1>${title}</h1><img src="${url}"></img>`
    }

    const tag = document.createElement('script')
    tag.src = 'https://cdn.jsdelivr.net/gh/xcodebuild/perfdemo@master/hello-world/api.jsonp.js'
    document.head.appendChild(tag)
  </script>
</head>
<body>
  <h1>Loading...</h1>
</body>
</html>

需要1.53s 完成整个页面的显示

从网络详情中可以看出，页面显示慢最大的问题在于图片的加载需要在接口请求后才能开始，而这两者都需要消耗较长的时间。

在接口请求前对图片进行预加载，那么在接口返回后就能直接渲染图片。

在 head 标签中加入以下代码

<link rel="preload" as="image" href="https://p1.music.126.net/aolHExjd1O1D-1MZcAEPyQ==/109951166361167293.jpg?param=170y170">

2. Real World

Vite 是前端开发的构建工具，可以快速构建一个页面

访问页面

可以看到 react-dom 消耗了6.5s，页面全部显示需要9.43s。

这是因为在开发模式下引入了很多仅在该模式下运行的代码，并且完全没有压缩。

Vite 默认提供通用的优化能力，使用 npx vite build 命令

可以看到文件体积缩小了很多。

使用 npx static-server-z 托管这些文件。

npx vite build
cd dist
npx static-server  -z

可以看到被优化到了 3.64s，其中最显著的优化是因为 Vite 将 JavaScript 代码打包到一起并压缩到了只有 144KB

进一步优化

可以将 vite.svg 和 react.svg 使用 preload 进行预加载

引入 antd

修改 App.jsx

import { Button, Modal } from 'antd'
import 'antd/dist/reset.css'

function App() {
  const onClick = () => {
    Modal.info({
      title: 'Hello World',
      onOk() {}
    })
  }

  return (
    <div>
      <Button style={{ margin: '20px' }} onClick={onClick}>Hello</Button>
    </div>
  )
}

export default App

打包并启动页面

npx vite build
cd dist
npx static-server  -z

按需引入

Vite 通过 Tree Shaking 的特性只引入了 Button组件和Modal组件所需要的 JavaScript 代码。

CSS 没有办法像 JavaScript 那样通过 Tree Shaking 自动实现按需引入，需要使用 vite-plugin-import 插件实现按需引入。

npm i vite-plugin-style-import -D

修改 vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import importPlugin from 'vite-plugin-import'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), importPlugin({
    babelImportPluginOptions: [
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'true'
      }
    ]
  })],
})

动态 import

使用动态 import 来引入 Modal 组件

import { Button } from 'antd'

function App() {
  const onClick = () => {
    Promise.all([
      import('antd/es/modal')
    ]).then((res) => {
      res[0].default.info({
        title: 'Hello World',
        onOk() {}
      })
    })
  }

  return (
    <div>
      <Button style={{ margin: '20px' }} onClick={onClick}>Hello</Button>
    </div>
  )
}

export default App

动态 import 本身并不减小文件的体积，背后实现这一点的是 Vite 的 Code Splitting（代码分割）。

使用 Code Splitting 可以将代码分割成多个文件，并且可以在需要的时候再加载，而动态 import 则可以告诉构建工具代码分割的分割点在哪里。

沿着路走到底

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端性能优化笔记1 第一章

需要1.53s 完成整个页面的显示从网络详情中可以看出，页面显示慢最大的问题在于图片的加载需要在接口请求后才能开始，而这两者都需要消耗较长的时间。在接口请求前对图片进行预加载，那么在接口返回后就能直接渲染图片。在 head 标签中加入以下代码。
复制链接

扫一扫