【工程化】前端工程化之自动合成精灵图

素颜马尾好姑娘i 2022-08-29 11:55 151阅读 0赞

![ec387be7f6970405394241ede6253af4.png][]

# 来源：hetia\_az    #

https://juejin.cn/post/6960939405209141261

# 前言 #

一般来说, 平时我们使用图标是一张一张来用, 请求图标的时候也是一张张返回, 如下:

![a1bdad11bb120bec2c818d959b9dea33.png][] 所以为了性能优化, 我们一般采用精灵图的方式来处理图标, 这里我们采用webpack插件 webpack-spritesmith来自动合成精灵图.

## 起步 ##

从零开始, 我们先创建个vue项目, 这里使用vue-cli3, 下面是创建好的项目:

![374bc7786c6cd70f9e1985c4c6da2099.png][] image.png

## 安装插件 ##

npm i webpack-spritesmith
    复制代码

## 使用 ##

因为是vue-cli3, 所以为了配置webpack, 我们得在根目录创建一个配置文件vue.config.js 然后在该文件引入使用该插件, 在此之前, 我们打开官方文档看看 `https://www.npmjs.com/package/webpack-spritesmith`

![27e8d7e2cded6e9d32304fe1694b43dc.png][] image.png

按照它的来(官方文档按照webpack的配置写法, 与vue-cli3用些许差异):

// vue.config.js
    var path = require('path');
    var SpritesmithPlugin = require('webpack-spritesmith');
    var templateFunction = function (data) {
      var shared = '.ico { background-image: url(I) }'
          .replace('I', data.sprites[0].image);
      var perSprite = data.sprites.map(function (sprite) {
          return '.ico-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
              .replace('N', sprite.name)
              .replace('W', sprite.width)
              .replace('H', sprite.height)
              .replace('X', sprite.offset_x)
              .replace('Y', sprite.offset_y);
      }).join('\n');
    
      return shared + '\n' + perSprite;
    };
    module.exports = {
      configureWebpack: config => {
        config.resolve.modules = ["node_modules", "spritesmith-generated"]
        let plugins = [
          new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'src/assets/icon'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
                css: [
                  [path.resolve(__dirname, 'src/spritesmith-generated/sprite.scss'), {
                    format: 'handlebars_based_template'
                  }]
                ]
            },
            customTemplates: {
              'handlebars_based_template': templateFunction,
            },
            apiOptions: {
                cssImageRef: "~sprite.png"
            }
          })
        ]
        config.plugins = [...config.plugins, ...plugins]
      }
    }
    复制代码

到这里基本就算完成了, 然后我们来使用一下 运行项目

yarn serve
    复制代码

![75106321315120da29c088c1260932b2.png][] image.png

发现生成了一个文件夹, 点开可以看到精灵图已经合成了, 在组件内使用:

![aabcf92e26b423e2ef4b9c343ca709a3.png][] image.png

![1c4b9243a766d821d5662747d3c90f5f.png][] 看到是使用精灵图了

## 打包 ##

然后再打包看看

yarn build
    复制代码

![15fbade6d1b7177a595b3dddf3a6ffdd.png][]

The End

欢迎自荐投稿，如果你觉得这篇内容对你挺有启发，我想请你帮我三个小忙：

1、点个 **「在看」**，让更多的人也能看到这篇内容

2、关注官网 **https://muyiy.cn**，让我们成为长期关系

3、关注公众号「高级前端进阶」，公众号后台回复 **「加群」** ，加入我们一起学习并送你精心整理的高级前端面试题。

》》面试官都在用的题库，快来看看《《

“在看”吗？在看就点一下吧

[ec387be7f6970405394241ede6253af4.png]: /images/20220829/b949830c6b0249ed96cc45437516b31a.png
[a1bdad11bb120bec2c818d959b9dea33.png]: /images/20220829/db39853d9e344b32858ebb35a27e21a1.png
[374bc7786c6cd70f9e1985c4c6da2099.png]: /images/20220829/97a398d771544a929151bd1ce3299cd6.png
[27e8d7e2cded6e9d32304fe1694b43dc.png]: /images/20220829/4df742f5023442c683942b4f49ec53c6.png
[75106321315120da29c088c1260932b2.png]: /images/20220829/58898df8a87442aaa27a7deab04ad413.png
[aabcf92e26b423e2ef4b9c343ca709a3.png]: /images/20220829/065af9ba977b4ebf99ab5d1de37f4067.png
[1c4b9243a766d821d5662747d3c90f5f.png]: /images/20220829/5b11757e9e424d039f281d1776669684.png
[15fbade6d1b7177a595b3dddf3a6ffdd.png]: /images/20220829/85568425844042748e24dea837b98c3e.png