前端性能优化－vue css精灵雪碧图合成

在实际项目开发中，svg和icon字体图标已使用非常广泛，但有些项目还是有着非常多的小图标需要合并为雪碧图。

vite-plugin-sprites是一款基于NodeJs的图片合成Vite插件，可将多张小图合并成一张大图并生成对应的css样式，可有效减少服务器接收和发送请求，提高页面加载速度。支持 Vue、React等所有框架，利用标签像iconfont一样调用即可，比较的方便。

github:github.com/337547038/v…

安装使用

npm install vite-plugin-sprites -D

vite.config配置

import { defineConfig } from 'vite' 
import sprites from 'vite-plugin-sprites'

export default defineConfig({
  plugins: [
    sprites({
      iconPath: '/src/assets/icon', // icon图片位置，默认/src/assets/icon
      savePath: '/src/assets/icon', // 生成的图片样式存放目录，默认/src/assets/icon（插件不会创建目录，需确保存放路径存在）
      width: 500, // 合并生成的图片宽度，单位px，默认 500
      spacing: 5, //两张图片间的间距，默认 5
      prefix: 'icon-' // 生成css类名前缀，默认 icon-
    })
  ]
})

通过以上配置，只需要 npm run dev 或 npm run build 启动则自动进行生成，新增删除及图片改变时都会重新进行合并生成相应的样式sprites.css和合成图片sprites.png。

引入样式

在项目页面适当位置引入生成的样式，如

import './assets/icon/sprites.css'  // 即savePath配置的路径+/sprites.css

也可以html页引入，如

<link href="配置的savePath路径/sprites.css">

在页面中使用

<div>
  <i class="icon-bar"></i>   <!-- icon目录下的 bar.png/jpg 文件-->
  <i class="icon-check"></i>   <!-- icon目录下的 check.png/jpg 文件-->
</div>