單頁面首屏最佳化方案具體步驟

背景

如果遇到一個老舊的專案，你的上司讓你對專案首頁進行最佳化處理，該如何上手呢？

1、Lighthouse谷歌外掛，根據報告指標檢測頁面效能

1. F12開啟控制檯-Lighthouse

2. 點選分析網頁載入情況按鈕，對當前頁面進行效能分析

3. 我們只關注效能即可

報告如下圖：

2、rollup-plugin-visualizer外掛，分析程式碼打包大小的工具(webpack中使用webpack-bundle-analyzer)

1. npm install --save-dev rollup-plugin-visualizer 安裝依賴

2. 配置

import { defineConfig, type PluginOption } from "vite";
import vue from "@vitejs/plugin-vue";
import { visualizer } from "rollup-plugin-visualizer";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      open: true,
    }) as PluginOption,
  ],
});

打包後 npm run build 會直接開啟瀏覽器，可以檢視各個程式碼塊佔用大小：

效能指標

LightHouse效能指標解釋：
FCP：衡量的是開啟網頁後，瀏覽器渲染第一段 DOM 內容所用的時間
LCP：用於測量視口中最大的內容元素何時渲染到螢幕上。這粗略地估算出網頁主要內容何時對使用者可見。

最佳化方法

1. 靜態檔案快取(js,css等)，圖片和SVG進行壓縮或者替換

• 檔案太大導致載入緩慢，可以使用線上壓縮工具把圖片進行壓縮，或者讓UI換一個不失真的佔用空間小的圖片

• 也可以使用靜態引用的方式，將圖片放到伺服器中

2. 將無用的路由、引用的庫刪除，然後啟用樹搖

• 刪掉無用路由很有用！加上樹搖，可以去掉很多程式碼，vite中就已經預設啟用的是樹搖方式

3. 路由懶載入 -路由配置頁面，可以將component的引用方式，改為component: () => import(/* webpackChunkName: "xx" */ '@/views/xx.vue') 實現元件的非同步載入

4. 非同步載入首頁不需要用到的js和css檔案

• 專案的index.html總有一些奇奇怪怪的js和css引入如下所示，會阻塞頁面的解析，我們在前端首頁解析完後（DOMContentLoaded事件）載入它們

<script>  
      document.addEventListener('DOMContentLoaded', () => {  
        ;['./luckysheet/plugins/js/plugin.js', './luckysheet/luckysheet.umd.js'].forEach((item) => {  
          const script = document.createElement('script')  
          script.defer = true  
          script.src = item  
          document.body.appendChild(script)  
        })  
        ;[  
          './luckysheet/plugins/css/pluginsCss.css',  
          './luckysheet/plugins/plugins.css',  
          './luckysheet/css/luckysheet.css',  
          './luckysheet/assets/iconfont/iconfont.css'  
        ].forEach((item) => {  
          const link = document.createElement('link')  
          link.rel = 'stylesheet'  
          link.type = 'text/css'  
          link.href = item  
          document.head.appendChild(link)  
        })  
      })  
    </script>

5. 此外還有服務端開啟http2、開啟Gzip壓縮，筆者最佳化之前已經開啟所以沒有對比，就不再贅述，實際上提升也非常大

6. 使用骨架屏代替普通loading，增強使用者友好訪問體驗