前端性能优化——持续更新

图片处理

1、减少图片体积

        可以通过压缩图片的显示去减少图片体积，一般用的都是png或者jpg，但是还不够，可以使用 webp 格式，webp 支持透明度和动画，完全可以用来替换png和gif格式，使用webp去压缩后的体积是非常客观

这是我压缩前后的对比，清晰度方面肉眼基本上是感知不到的

推荐个网址：在线将 PNG 转换为 WEBP

2、多张图片融合成一个精灵图

        像咱们项目中肯定是多个小图标的，如果每个小图标都是单独的一个文件，那么在请求的时候是会触发多次http请求的，咱们可以吧他们通过融合为一张精灵图，然后通过background-image和background-position去定位到对应的位置，但是这里只限制是元素的大小是固定的，因为如果当元素是响应式的，那么它的图片定位也需要发送对应的改变

当然也有人说：什么年代了还精灵图，用字体图标。

虽然我现在基本上用字体图标，但这也是一种优化方式嘛

3、可以使用懒加载显示（提高首屏加载速度）

        可以通过 IntersectionObserver 来实现懒加载，就是当我们的视窗没有显示到的时候不加载图片，当我们的图片出现在视窗的时候才去请求图片资源，当请求完数据后再去删除对它的监听

例子：

  // 首先，我们需要选择我们想要观察的元素
  let element = document.querySelector('#imgDom');

  // 创建一个新的 Intersection Observer 实例，并传入我们的回调函数
  let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      // 如果元素在视口中 && 图片的src 为空
      if (entry.isIntersecting && entry.target.src = '') {
        entry.target.src = '图片路径';
        observer.unobserve(entry.target);
      } else if(entry.target.src || entry.target.src != ''){
        // 如果图片的src不为空 则取消观察
        observer.unobserve(entry.target);
      }
    });
  });

  // 最后，我们让 observer 开始观察我们的元素
  observer.observe(element);

 视频处理

1、视频压缩

        还是一样，第一步都是去减少体积，至于压缩到何种地步，这个就得自己去把控了，而且市面上关于压缩的都很多，这里推荐最终格式为mp4

2、策略上可以使用 流媒体——m3u8

        当一个视频的播放时长很长的时候，不可能让视频加载完毕之后再给客户去展示的，因为耗时巨长，而一般采用的都是切片的形式，就是先给你加载一部分，当你快播放完的时候再去给你加载一部分

之前写了一篇 MP4转HLS协议 并且使用 HLS.js 去加载 m3u8 的例子就不赘述了，大家可以去看看

                                   

注意：使用浏览器基本上都是支持的，但是微信自带的浏览器是不支持的，这里只能老老实实的使用mp4，当然咱们可以先让客户去加载一张图片，当视频加载完毕之后再去删除图片

3、懒加载——和上面的图片懒加载是一个道理

打包体积优化——Vite

1、安装 rollup-plugin-visualizer 插件，去看打包后的库体积，然后可以再去进行针对性优化

import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  build: {
    rollupOptions: {
      // open —— 打包后自动打开stats.html
      plugins: [visualizer({ open: true })]
    },
  }
})

大概是这样的 

2、根据不同的库，分别打出对应的chunk

export default defineConfig({
  build: {
    rollupOptions: {
      entryFileNames: 'index.js', // 打包后的入口文件
      chunkFileNames: 'asset/js/[name]-[hash].js', //分包名
      assetFileNames: 'asset/[ext]/[name]-[hash].[ext]', // 资源文件名
      manualChunks(name: string) {
        if (name.includes('/node_modules/')) {
          if (name.includes('babylon')) {
            return 'babylon';
          }
          if (name.includes('react')) {
            return 'react';
          }
          if (name.includes('antd')) {
            return 'antd';
          }
          return 'node_modules'
        }
      },
    },
  }
})

这里我是分了四个，一个是node_modules，然后吧babylon、react、antd都单独领了出来

3、添加gzip压缩

这里我使用的是 vite-plugin-compression2              链接： vite-plugin-compression2 - npm

这个还是很好配置的，直接引入就行，当然还有很多的配置项，这里大家可以去官网看看

import { compression } from 'vite-plugin-compression2';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [compression()]
})

主要还是喜欢这种傻瓜式直接引用就完事，还配置个毛线😍

解析完成后还需要后端进行配合  至于怎么配合  然后他自己搜去，此处不做解释 

除了gzip 还有 Brotli 压缩 但是比较麻烦，后期我再详细介绍一下

4、去除  consol 和 debugger

export default defineConfig({
    esbuild: {
      drop: viteEnv.VITE_DROP_CONSOLE ? ['console', 'debugger'] : [], //删除所有的console和debugger
    },
})

这里是根据env来决定是否删除

也有的人是使用  terser  这个压缩的，这里用的是esbuild，其实两个都可以

持续更新>>>