单页面首屏优化处理方法

程序员小淞
376 阅读2分钟
背景

如果遇到一个老旧的项目，你的上司让你对项目首页进行优化处理，该如何上手呢？

1、Lighthouse谷歌插件，根据报告指标检测页面性能
  1. F12打开控制台-Lighthouse
  2. 点击分析网页加载情况按钮，对当前页面进行性能分析
  3. 我们只关注性能即可

报告如下图：

image.png

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 会直接打开浏览器，可以查看各个代码块占用大小：

image.png

性能指标

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>
  1. 此外还有服务端开启http2、开启Gzip压缩，笔者优化之前已经开启所以没有对比，就不再赘述，实际上提升也非常大
  2. 使用骨架屏代替普通loading，增强用户友好访问体验
avatar
文章
阅读
粉丝