谁动了你的Base64?

发表于

最近在项目中遇到一个很奇怪的问题。在使用SVG图片平铺作为页面背景时，会出现下图的情况，代码如下：

1
2
3
4
5
.edit-canvas-name {
    background-image: url('./layout.svg');
    background-size: 100% 100px;
    background-repeat: repeat-y;
}

wrong

我们可以明显地看到，在第一列和第二列之间的空间明显大于其他列之间的空间，而且这个问题只出现在线上，本地运行并不会出现这个问题，本地运行时如下：

right

通过比较线上和本地运行时的代码发现，webpack 将 SVG 转换为 base64 格式，线上和本地的 base64 并不相同。

线上：

1
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxzdHlsZT5yZWN0e3k6MTBweDt3aWR0aDpjYWxjKCgxMDAlIC0gMTMwcHgpLzEyKTtmaWxsOiNmNWY3ZmF9cmVjdDpudGgtY2hpbGQoMSl7eDpjYWxjKCgoMTAwJSAtIDEzMHB4KS8xMiArIDEwcHgpKjAgKyAxMHB4KX1yZWN0Om50aC1jaGlsZCgyKXt4OmNhbGMoKCgxMDAlIC0gMTMwcHgpLzEyICsgMTBweCkqMSArIDEwcHgpfXJlY3Q6bnRoLWNoaWxkKDMpe3g6Y2FsYygoKDEwMCUgLSAxMzBweCkvMTIgKyAxMHB4KSoyICsgMTBweCl9cmVjdDpudGgtY2hpbGQoNCl7eDpjYWxjKCgoMTAwJSAtIDEzMHB4KS8xMiArIDEwcHgpKjMgKyAxMHB4KX1yZWN0Om50aC1jaGlsZCg1KXt4OmNhbGMoKCgxMDAlIC0gMTMwcHgpLzEyICsgMTBweCkqNCArIDEwcHgpfXJlY3Q6bnRoLWNoaWxkKDYpe3g6Y2FsYygoKDEwMCUgLSAxMzBweCkvMTIgKyAxMHB4KSo1ICsgMTBweCl9cmVjdDpudGgtY2hpbGQoNyl7eDpjYWxjKCgoMTAwJSAtIDEzMHB4KS8xMiArIDEwcHgpKjYgKyAxMHB4KX1yZWN0Om50aC1jaGlsZCg4KXt4OmNhbGMoKCgxMDAlIC0gMTMwcHgpLzEyICsgMTBweCkqNyArIDEwcHgpfXJlY3Q6bnRoLWNoaWxkKDkpe3g6Y2FsYygoKDEwMCUgLSAxMzBweCkvMTIgKyAxMHB4KSo4ICsgMTBweCl9cmVjdDpudGgtY2hpbGQoMTApe3g6Y2FsYygoKDEwMCUgLSAxMzBweCkvMTIgKyAxMHB4KSo5ICsgMTBweCl9cmVjdDpudGgtY2hpbGQoMTEpe3g6Y2FsYygoKDEwMCUgLSAxMzBweCkvMTIgKyAxMHB4KSoxMCArIDEwcHgpfXJlY3Q6bnRoLWNoaWxkKDEyKXt4OmNhbGMoKCgxMDAlIC0gMTMwcHgpLzEyICsgMTBweCkqMTEgKyAxMHB4KX08L3N0eWxlPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==)

本地：

1
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogICAgPHN0eWxlIHJlbD0ic3R5bGVzaGVldCI+CiAgICAgICAgcmVjdHsKICAgICAgICAgICAgeTogMTBweDsKICAgICAgICAgICAgd2lkdGg6IGNhbGMoKDEwMCUgLSAxMzBweCkgLyAxMik7CiAgICAgICAgICAgIGZpbGw6ICNGNUY3RkE7CiAgICAgICAgfQogICAgICAgIHJlY3Q6bnRoLWNoaWxkKDEpewogICAgICAgICAgICB4OiBjYWxjKCgoMTAwJSAtIDEzMHB4KSAvIDEyICsgMTBweCkgKiAwICsgMTBweCk7CiAgICAgICAgfQogICAgICAgIHJlY3Q6bnRoLWNoaWxkKDIpewogICAgICAgICAgICB4OiBjYWxjKCgoMTAwJSAtIDEzMHB4KSAvIDEyICsgMTBweCkgKiAxICsgMTBweCk7CiAgICAgICAgfQogICAgICAgIHJlY3Q6bnRoLWNoaWxkKDMpewogICAgICAgICAgICB4OiBjYWxjKCgoMTAwJSAtIDEzMHB4KSAvIDEyICsgMTBweCkgKiAyICsgMTBweCk7CiAgICAgICAgfQogICAgICAgIHJlY3Q6bnRoLWNoaWxkKDQpewogICAgICAgICAgICB4OiBjYWxjKCgoMTAwJSAtIDEzMHB4KSAvIDEyICsgMTBweCkgKiAzICsgMTBweCk7CiAgICAgICAgfQogICAgICAgIHJlY3Q6bnRoLWNoaWxkKDUpewogICAgICAgICAgICB4OiBjYWxjKCgoMTAwJSAtIDEzMHB4KSAvIDEyICsgMTBweCkgKiA0ICsgMTBweCk7CiAgICAgICAgfQogICAgICAgIHJlY3Q6bnRoLWNoaWxkKDYpewogICAgICAgICAgICB4OiBjYWxjKCgoMTAwJSAtIDEzMHB4KSAvIDEyICsgMTBweCkgKiA1ICsgMTBweCk7CiAgICAgICAgfQogICAgICAgIHJlY3Q6bnRoLWNoaWxkKDcpewogICAgICAgICAgICB4OiBjYWxjKCgoMTAwJSAtIDEzMHB4KSAvIDEyICsgMTBweCkgKiA2ICsgMTBweCk7CiAgICAgICAgfQogICAgICAgIHJlY3Q6bnRoLWNoaWxkKDgpewogICAgICAgICAgICB4OiBjYWxjKCgoMTAwJSAtIDEzMHB4KSAvIDEyICsgMTBweCkgKiA3ICsgMTBweCk7CiAgICAgICAgfQogICAgICAgIHJlY3Q6bnRoLWNoaWxkKDkpewogICAgICAgICAgICB4OiBjYWxjKCgoMTAwJSAtIDEzMHB4KSAvIDEyICsgMTBweCkgKiA4ICsgMTBweCk7CiAgICAgICAgfQogICAgICAgIHJlY3Q6bnRoLWNoaWxkKDEwKXsKICAgICAgICAgICAgeDogY2FsYygoKDEwMCUgLSAxMzBweCkgLyAxMiArIDEwcHgpICogOSArIDEwcHgpOwogICAgICAgIH0KICAgICAgICByZWN0Om50aC1jaGlsZCgxMSl7CiAgICAgICAgICAgIHg6IGNhbGMoKCgxMDAlIC0gMTMwcHgpIC8gMTIgKyAxMHB4KSAqIDEwICsgMTBweCk7CiAgICAgICAgfQogICAgICAgIHJlY3Q6bnRoLWNoaWxkKDEyKXsKICAgICAgICAgICAgeDogY2FsYygoKDEwMCUgLSAxMzBweCkgLyAxMiArIDEwcHgpICogMTEgKyAxMHB4KTsKICAgICAgICB9CiAgICA8L3N0eWxlPgogICAgPGc+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIi8+CiAgICA8L2c+Cjwvc3ZnPg==)

项目中 webpack 对 SVG 的处理是使用url-loader，代码如下：

1
2
3
4
{
    test: /\.(svg?)(\?[a-z0-9]+)?$/,
    loader: 'url-loader?limit=8192'
},

url-loader在图片大小不超过限制时，会将图片以base64的形式打包进css文件以减少请求次数，在图片大小超过限制时则会用file-loader加载图片。难道是url-loader转换的原因？我把代码改成：

1
2
3
4
{
    test: /\.(svg?)(\?[a-z0-9]+)?$/,
    loader: 'file-loader'
},

再次打包部署，果然好了，但是同一张 SVG 图片url-loader为什么会生成两种base64呢，所以我在node_modules/url-loader/dist/index.js里console.log打印一下输出的base64

1
2
3
4
5
6
7
8
9
10
11
12
// No limit or within the specified limit
    if (!limit || src.length < limit) {
        if (typeof src === 'string') {
            src = Buffer.from(src);
        }

        let base64 = `module.exports = ${JSON.stringify(`data:${mimetype || ''};base64,${src.toString('base64')}`)}`;

        console.log('return>>>>', base64);

        return `module.exports = ${base64}`;
    }

npm start发现打印出来的base64和本地运行时base64相同，那线上的另一种base64是哪里来的呢，难道是因为npm start时执行的是development模式？所以我又尝试npm run build，打印出来的还是和本地一样的base64。

这就很让人百思不得其解了，npm run build时转换出来的也是正确的base64，那错误的base64是哪里来的呢。所以我又查看了构建出来的/dest/app.css

1
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxzdHlsZT5yZWN0e3k6MTBweDt3aWR0aDpjYWxjKCgxMDAlIC0gMTMwcHgpLzEyKTtmaWxsOiNmNWY3ZmF9cmVjdDpudGgtY2hpbGQoMSl7eDpjYWxjKCgoMTAwJSAtIDEzMHB4KS8xMiArIDEwcHgpKjAgKyAxMHB4KX1yZWN0Om50aC1jaGlsZCgyKXt4OmNhbGMoKCgxMDAlIC0gMTMwcHgpLzEyICsgMTBweCkqMSArIDEwcHgpfXJlY3Q6bnRoLWNoaWxkKDMpe3g6Y2FsYygoKDEwMCUgLSAxMzBweCkvMTIgKyAxMHB4KSoyICsgMTBweCl9cmVjdDpudGgtY2hpbGQoNCl7eDpjYWxjKCgoMTAwJSAtIDEzMHB4KS8xMiArIDEwcHgpKjMgKyAxMHB4KX1yZWN0Om50aC1jaGlsZCg1KXt4OmNhbGMoKCgxMDAlIC0gMTMwcHgpLzEyICsgMTBweCkqNCArIDEwcHgpfXJlY3Q6bnRoLWNoaWxkKDYpe3g6Y2FsYygoKDEwMCUgLSAxMzBweCkvMTIgKyAxMHB4KSo1ICsgMTBweCl9cmVjdDpudGgtY2hpbGQoNyl7eDpjYWxjKCgoMTAwJSAtIDEzMHB4KS8xMiArIDEwcHgpKjYgKyAxMHB4KX1yZWN0Om50aC1jaGlsZCg4KXt4OmNhbGMoKCgxMDAlIC0gMTMwcHgpLzEyICsgMTBweCkqNyArIDEwcHgpfXJlY3Q6bnRoLWNoaWxkKDkpe3g6Y2FsYygoKDEwMCUgLSAxMzBweCkvMTIgKyAxMHB4KSo4ICsgMTBweCl9cmVjdDpudGgtY2hpbGQoMTApe3g6Y2FsYygoKDEwMCUgLSAxMzBweCkvMTIgKyAxMHB4KSo5ICsgMTBweCl9cmVjdDpudGgtY2hpbGQoMTEpe3g6Y2FsYygoKDEwMCUgLSAxMzBweCkvMTIgKyAxMHB4KSoxMCArIDEwcHgpfXJlY3Q6bnRoLWNoaWxkKDEyKXt4OmNhbGMoKCgxMDAlIC0gMTMwcHgpLzEyICsgMTBweCkqMTEgKyAxMHB4KX08L3N0eWxlPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjxyZWN0IGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==)}

果然，这里已经变成了错误的base64，而且代码已经被压缩了，等等，压缩……难道是webpack对css压缩改变了base64，而且webpack只会在npm run build的时候进行css压缩，这也就解释了为什么本地正常，线上就有问题了，一切好像都说得通了……

验证也很简单，我们是使用optimize-css-assets-webpack-plugin进行css压缩，在webpack.config.babel.js里注释掉new OptimizeCSSAssetsPlugin({}) 这一行就好啦。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
switch (ENV) {
    case 'production':
        config = merge(config, {
            optimization: {
                minimizer: [
                    new UglifyJsPlugin({
                        cache: true,
                        parallel: true,
                        sourceMap: false
                    }),
                   // new OptimizeCSSAssetsPlugin({})
                ]
            },
            plugins: [new CleanWebpackPlugin([TARGET])]
        });
        break;

再次npm run build，dest/app.css里已经是正确的base64了。
但是，我们不可能不压缩css，而且css压缩为什么会改变base64呢，我们再继续看，将在浏览器控制台右键在新Tab页中打开base64，显示错误的base64的 SVG 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style rel="stylesheet">
        rect{
            y: 10px;
            width: calc((100% - 130px) / 12);
            fill: #F5F7FA;
        }
        rect:nth-child(1){
            x: calc(((100% - 130px) / 12 + 10px) * 0 + 10px);
        }
        rect:nth-child(2){
            x: calc(((100% - 130px) / 12 + 10px) * 1 + 10px);
        }
        rect:nth-child(3){
            x: calc(((100% - 130px) / 12 + 10px) * 2 + 10px);
        }
        rect:nth-child(4){
            x: calc(((100% - 130px) / 12 + 10px) * 3 + 10px);
        }
        rect:nth-child(5){
            x: calc(((100% - 130px) / 12 + 10px) * 4 + 10px);
        }
        rect:nth-child(6){
            x: calc(((100% - 130px) / 12 + 10px) * 5 + 10px);
        }
        rect:nth-child(7){
            x: calc(((100% - 130px) / 12 + 10px) * 6 + 10px);
        }
        rect:nth-child(8){
            x: calc(((100% - 130px) / 12 + 10px) * 7 + 10px);
        }
        rect:nth-child(9){
            x: calc(((100% - 130px) / 12 + 10px) * 8 + 10px);
        }
        rect:nth-child(10){
            x: calc(((100% - 130px) / 12 + 10px) * 9 + 10px);
        }
        rect:nth-child(11){
            x: calc(((100% - 130px) / 12 + 10px) * 10 + 10px);
        }
        rect:nth-child(12){
            x: calc(((100% - 130px) / 12 + 10px) * 11 + 10px);
        }
    </style>
    <rect height="100%"/>
    <rect height="100%"/>
    <rect height="100%"/>
    <rect height="100%"/>
    <rect height="100%"/>
    <rect height="100%"/>
    <rect height="100%"/>
    <rect height="100%"/>
    <rect height="100%"/>
    <rect height="100%"/>
    <rect height="100%"/>
    <rect height="100%"/>
</svg>

我们再打开正确的base64的SVG代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style rel="stylesheet">
        rect{
            y: 10px;
            width: calc((100% - 130px) / 12);
            fill: #F5F7FA;
        }
        rect:nth-child(1){
            x: calc(((100% - 130px) / 12 + 10px) * 0 + 10px);
        }
        rect:nth-child(2){
            x: calc(((100% - 130px) / 12 + 10px) * 1 + 10px);
        }
        rect:nth-child(3){
            x: calc(((100% - 130px) / 12 + 10px) * 2 + 10px);
        }
        rect:nth-child(4){
            x: calc(((100% - 130px) / 12 + 10px) * 3 + 10px);
        }
        rect:nth-child(5){
            x: calc(((100% - 130px) / 12 + 10px) * 4 + 10px);
        }
        rect:nth-child(6){
            x: calc(((100% - 130px) / 12 + 10px) * 5 + 10px);
        }
        rect:nth-child(7){
            x: calc(((100% - 130px) / 12 + 10px) * 6 + 10px);
        }
        rect:nth-child(8){
            x: calc(((100% - 130px) / 12 + 10px) * 7 + 10px);
        }
        rect:nth-child(9){
            x: calc(((100% - 130px) / 12 + 10px) * 8 + 10px);
        }
        rect:nth-child(10){
            x: calc(((100% - 130px) / 12 + 10px) * 9 + 10px);
        }
        rect:nth-child(11){
            x: calc(((100% - 130px) / 12 + 10px) * 10 + 10px);
        }
        rect:nth-child(12){
            x: calc(((100% - 130px) / 12 + 10px) * 11 + 10px);
        }
    </style>
    <g>
        <rect height="100%"/>
        <rect height="100%"/>
        <rect height="100%"/>
        <rect height="100%"/>
        <rect height="100%"/>
        <rect height="100%"/>
        <rect height="100%"/>
        <rect height="100%"/>
        <rect height="100%"/>
        <rect height="100%"/>
        <rect height="100%"/>
        <rect height="100%"/>
    </g>
</svg>

看到区别了吗？没错，错误的代码比正确的缺少了<g>标签。SVG 中，将元素成组的标签是g元素，使用它是将元素进行分组，然后统一进行平移和旋转之类的功能变换。optimize-css-assets-webpack-plugin自动进行代码压缩，将<g>标签也当做多余元素去掉了，所以会导致样式异常。所以解决方法就是将处理svg的url-loader改为file-loader就可以了。