现状
一次在公司的旧项目中的JavaScript使用了es6的语法如let时,打包代码出现了问题:
[ERROR] ...\src\main\webapp\pages\modules\main\order.js:line 81:column 16:missing ; before statement
let formObj = this.getForm();
[ERROR] ...\src\main\webapp\pages\modules\main\order.js:line 1:column 0:Compilation produced 1 syntax errors.
[ERROR] Failed to execute goal net.alchim31.maven:yuicompressor-maven-plugin:1.3.0:compress (default) on project ydt-web: Execution default of goal net.alchim31.maven:yuicompressor-maven-plugin:1.3.0:compress failed: Compilation produced 1 syntax errors. -> [Help 1]
问题分析
YUI Compressor(下文简称为YUI)不支持es6语法,且已经很长时间不更新了 其Maven插件yuicompressor-maven-plugin也已经在2022年进入归档状态,不再维护,因为该插件的维护者都认为YUI已经不适用于主流的JavaScript开发了 而我们的项目也因为每次有新员工修改它时都会遇到语法的这个问题,所以我们想彻底解决它。
需求
线上的JavaScript和CSS文件需要压缩减小体积,提升网页打开的效率支持es6语法,降低开发复杂度只在打包时压缩代码,开发时的源代码不压缩,避免代码混乱难以维护使用的插件最好近期有更新维护,避免遇到问题无法获得技术支持
方案搜寻
在YUI的issue中找到了另一个支持压缩es6语法的插件minify-maven-plugin,但这个插件我使用的时候出现了一个问题,写了如下的代码会报错:
// 花括号的最后一个元素不能有逗号
var a = {
test1: 1,
test2: 2,
}
虽然后面也在issue中找到了解决方法(设置closureLanguage),但发现这个项目已经很久没再维护,使用手册也已经404了,因此这个插件也被pass掉
再之后看到resources-optimizer-maven-plugin的作者自荐,发现这个插件满足我们上面的需求,而且表明修复了YUI的问题,就决定采用这个插件
下面是添加resources-optimizer-maven-plugin插件依赖的代码:
项目在打包过程中看到控制台输出了以下内容说明成功引入: 完成后会显示压缩情况,在我们的项目中的JavaScript和CSS压缩了50%+
实现过程的踩坑
使用resources-optimizer-maven-plugin后源代码被压缩
在maven的生命周期maven-resources-plugin中进行操作修改压缩代码的来源目录 打包成war包后,里面的JavaScript却是未压缩的源码
JavaScript文件在压缩之后,到maven的生成war包环节时会重新将JavaScript和CSS等内容复制,因此我们需要在maven-war-plugin中配置不复制JavaScript和CSS文件(见下文代码实现的构建期间
代码实现
在进行了一圈的搜罗后,使用了resources-optimizer-maven-plugin插件,并在pom.xml文件中加入如下配置:
压缩插件引入及配置
构建期间配置
总结
使用resources-optimizer-maven-plugin插件的优势如下:
更多的压缩方式:支持Google Closure Compiler的JavaScript编译压缩方式和YUI对CSS的压缩方式对于新语法有更好的支持:Google Closure Compiler对于es6支持良好,其JavaScript的压缩效果也比YUI更好更好的技术支持:此插件最近一次维护时间是2024年10月1日,目前所有issue已经是解决状态,反观minify-maven-plugin和yuicompressor-maven-plugin都已经多年未维护,所以推荐有需要的可以看看这个新插件
带来的问题思考:
Google Closure Compiler对于JavaScript的编写会更严格,当存在不规范的写法时会报错,如同一个方法名在一个JavaScript文件中出现两次前后端分离的项目应该用不上这个插件,现在的vue项目都有webpack之类的自动压缩转换JavaScript的工具,因此这个插件可能更多用于老项目上
参考链接
github:代码压缩maven插件resources-optimizerresources-optimizer使用手册:打包配置说明github:minify的maven插件github:minify很久没更新的issue,并推荐了resources-optimizergithub:yui不支持es6的issue