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

╰+攻爆jí腚メ 2022-10-16 07:26 173阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![56a63a556adf401c9f889c3323c5e40f.png][]

# 来源：hetia\_az    #

https://juejin.cn/post/6960939405209141261

# 前言 #

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

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

## 起步 ##

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

![a382f17387389b2f077b6db1f3a5fc3e.png][] image.png

## 安装插件 ##

npm i webpack-spritesmith
    复制代码

## 使用 ##

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

![bc074baac1f294b1c6b61f62b956b41d.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
    复制代码

![59b0701aac5b984d80d7941d343ebc21.png][] image.png

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

![68caecda6902cd56d6688000cca091d5.png][] image.png

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

## 打包 ##

然后再打包看看

yarn build
    复制代码

![ed5431a92a96f07469cf144eefd97ae0.png][] image.png

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[56a63a556adf401c9f889c3323c5e40f.png]: /images/20221014/06891eeadf354340a13a8fb546a9d115.png
[67e175858ba33e3a9e211543df4d6d6a.png]: /images/20221014/62d01d1d60cb498e8bd2a0dc77f5d135.png
[a382f17387389b2f077b6db1f3a5fc3e.png]: /images/20221014/b5a3eaa570f647d189b38ef1b40599b0.png
[bc074baac1f294b1c6b61f62b956b41d.png]: /images/20221014/28b9db17304e4eb8812b6ddf795bfdf1.png
[59b0701aac5b984d80d7941d343ebc21.png]: /images/20221014/aa0e5965e5df415e807b2596adb87a12.png
[68caecda6902cd56d6688000cca091d5.png]: /images/20221014/e5ec97f8a329419687d0b662520e6da9.png
[fe076368ababcc70860d03a9f87b8c52.png]: /images/20221014/1ab0157b12f84bb68fa67e5cc3111cad.png
[ed5431a92a96f07469cf144eefd97ae0.png]: /images/20221014/3f793c462ce14993b864949c47849dcb.png