1 资源合并

在浏览器中，针对图标的解决方案按流行时间来排序：CSS Sprites、IconFont、SVG Symbols

1.1 CSS雪碧图

  • 雪碧图的英文是CSS Sprites。 其目的是将多张比较小的图片，合并到一张大的图片上面，大的图片背景透明，使用的时候，通过把该张图片当做背景图片，通过不同的 background-position定位来展示的那部分图片。

  • 可以利用Webpack的插件来完成

  • 优势

    1. 降低服务器压力。
    2. 减少网络请求，页面渲染更快。

  • 缺点

    1. 后期维护困难，添加一张图片需要重新制作。
    2. 应用麻烦，每一张图都需要计算位置，通过调整位置来展示图片，对误差的要求很严格。
    3. 使用图片有局限，只能用在背景图片background-image上，不能用<img>标签来使用。

1.2 Icon Font

  • 图标类的图片，可以将其制作为icon font

https://iconfont.cn/

  • 可以在这里面上传图标并生成font文件

1.3 SVG Symbols

  • 将图片转换为svg文件，一个svg文件可能会存在若干图标，

  • 使用

    • 1
2
3
4
5

      import x from 'label.svg'
...
<svg>
	<use xlinkHref='#label1'/>
</svg>

  • 优势

    1. 支持渐变
    2. 编辑方便

2 资源内联

针对较小的图片、css文件及js文件，通过一定的形式变成html内部的内容

  • 图片

    • 可以将图片更换为data URL

    • 利用url-loader通过webpack可以实现图片转换为data URL

    • webpack配置

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

      module.exports = {
	modules: {
		rules: [
			{
				test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,// 适用于8k以下的图片
            },
          },
        ],
			}
		]
	}
}

    • 使用

      1

      import img from './image.png'

  • 对于较小的css文件或js文件，可以直接以内联标签（<style>/<script>）的形式写入html

3 资源压缩

服务器在将响应传给浏览器之前，先将其压缩为gzip包，然后浏览器端解压缩即可

  • nginx开启gzip压缩

    1
2
3
4
5

    sever {
	gzip on;
	gzip_types text/plain application/xml; // 哪些文件需要gzip
	gzip_min_length 1000; // 如果文件过小，就没有必要压缩了
}

  • Node.js实现gzip压缩

    1

    自己写代码

4 资源精简