码迷,mamicode.com
首页 > Web开发 > 详细

网站性能优化之雪碧图制作

时间:2018-03-24 16:25:46      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:SM   web   down   ret   path   工作效率   ssi   jsb   插件   

雪碧图制作及使用

制作目的:由于网站上有需要小的icon且每次加载的时候都会有许多类似的请求,影响了网站的性能。所以将小图标合并成一张雪碧图,从而减少图片的请求数,优化网站性能。

制作方法:

1、刀耕火种法 
利用photoshop把一张张小图合成一张雪碧图(工作效率太低不建议使用);

2、机械生产法: 
利用在线生成工具生成雪碧图: 
工具地址:http://csssprites.com/http://alloyteam.github.io/gopng/

技术分享图片
将要合成的图片添加到工具里已经合成,然后下载css和png图片

3、自动合成法:gulp、fis3、webpack打包合成 
webpack打包合成:安装webpack-spritesmith插件对文件进行打包即可生产css文件和png图片

  • 安装webpack-spritesmith 
    npm i webpack-spritesmith –save-dev

  • 在webpack.config.js中配置plugins

//声明插件
const SpritesmithPlugin = require(‘webpack-spritesmith‘);

//配置插件
 plugins:[
    new SpritesmithPlugin({
      src: {
        cwd: path.resolve(__dirname,‘src/ico‘),
        glob: ‘*.png‘
      },
      target: {
        image: path.resolve(__dirname,‘src/assets/sprites.png‘),
        css: path.resolve(__dirname, ‘src/assets/_sprites.css‘)
      },
      apiOptions: {
        cssImageRef: ‘./sprites.png‘
      }
    })
]
  • webpack执行打包生成文件路径‘src/assets’下有两个文件sprites.png、_sprites.css即为所得

网站性能优化之雪碧图制作

标签:SM   web   down   ret   path   工作效率   ssi   jsb   插件   

原文地址:https://www.cnblogs.com/annie211/p/8639207.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!