Maven压缩插件误删CSS中URL字符串空格问题求助

我们使用minify-maven-plugin压缩JS和CSS时，发现插件会错误删除CSS中data URL里的空格，导致SVG资源无法正常加载。

插件配置 #

<plugin>
    <groupId>com.samaxes.maven</groupId>
    <artifactId>minify-maven-plugin</artifactId>
    <executions>
        <execution>
            <id>default-minify</id>
            <configuration>
                <jsEngine>CLOSURE</jsEngine>
                <skipMerge>true</skipMerge>
                <nosuffix>true</nosuffix>
                <webappSourceDir>${basedir}/src/main/webapp</webappSourceDir>
                <cssSourceDir>css</cssSourceDir>
                <cssSourceFiles>
                    <cssSourceFile>global.css</cssSourceFile>
                </cssSourceFiles>
                <jsSourceDir>javascript</jsSourceDir>
                <jsSourceFiles>
                    <jsSourceFile>root.js</jsSourceFile>
                    <jsSourceFile>global.js</jsSourceFile>
                </jsSourceFiles>
            </configuration>
            <goals>
                <goal>minify</goal>
            </goals>
        </execution>
    </executions>
</plugin>

问题示例 #

• 原始CSS代码：

background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%23EA7200'/%3e%3c/svg%3e");

• 压缩后错误代码（空格被删除，SVG语法失效）：

background-image: url("data:image/svg+xml,%3csvgxmlns='http://www.w3.org/2000/svg'viewBox='001414'%3e%3ccirclecx='50%25'cy='50%25'r='4'fill='%23EA7200'/%3e%3c/svg%3e")

解决方法 #

方法1：用%20替代data URL中的空格 #

直接把原始CSS里data URL内的空格替换成URL编码的%20，插件不会识别为可删除空格，同时浏览器能正常解析。

修改后的CSS：

background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3e%3ccircle%20cx='50%25'%20cy='50%25'%20r='4'%20fill='%23EA7200'/%3e%3c/svg%3e");

方法2：更换CSS压缩引擎 #

默认CSS压缩引擎对data URL处理存在bug，可尝试切换为YUI引擎，在插件配置中添加<cssEngine>参数：

<configuration>
    <jsEngine>CLOSURE</jsEngine>
    <cssEngine>YUI</cssEngine> <!-- 指定CSS压缩引擎为YUI -->
    <skipMerge>true</skipMerge>
    <!-- 其他原有配置保持不变 -->
</configuration>

YUI引擎对data URL的空格处理更精准，不会误删必要的空格。

方法3：升级插件版本 #

旧版本插件可能存在该bug，尝试升级到最新稳定版，看是否已修复问题：

<plugin>
    <groupId>com.samaxes.maven</groupId>
    <artifactId>minify-maven-plugin</artifactId>
    <version>1.7.6</version> <!-- 替换为最新稳定版本号 -->
    <!-- 其他配置不变 -->
</plugin>

内容的提问来源于stack exchange，提问作者Lee