maven实现对js文件进行变量替换和文件压缩(2)

最新推荐文章于 2021-06-04 09:39:49 发布

_再见阿郎_

最新推荐文章于 2021-06-04 09:39:49 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏： maven 文章标签： maven实现对js文件进行变量替换和文件压缩 js文件压缩和变量替换线上部署对js压缩和变量替换 maven对js文件压缩 maven快速配置js压缩

本文链接：https://blog.csdn.net/FU250/article/details/103195349

maven 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了使用maven进行js文件变量替换后再压缩的方案，包括三个步骤：变量替换生成新js文件，压缩新文件，打包时拷贝压缩文件到war包。相较于先压缩后替换的方式，此方法避免了因压缩导致的变量替换问题，但构建过程更复杂，文件操作次数更多，影响打包效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前情回顾：

实现对js文件进行变量替换和文件压缩方式如下：

现在实现方式有两种：1.对js文件进行压缩，再对其进行变量替换。

2.对js文件进行变量替换，再对其进行压缩。

前文 https://mp.csdn.net/postedit/103187480 介绍了通过maven方式介绍了第一种方式，本文将介绍第二种方式，整体的实现方案如下：

1.先替换js变量新的js文件生成到-> 项目根目录/target/js-srouce下。

<!--指定变量替换文件所在位置-->
		<filters>
			<filter>src/main/resources/env/${env}.properties</filter>
			<filter>../env/env_common.properties</filter>
		</filters>
		<!--指定打包资源开始-->
		<resources>
			<!--替换properties中的占位符-->
            <resource>
                <directory>src/main/webapp</directory>
                <filtering>true</filtering>
                <includes>
                    <include>jslib/**/*.js</include>
                </includes>
                <!--变量替换后的js文件生成到target/js-sources下-->
                <targetPath>../js-sources</targetPath>
            </resource>
		</resources>

2.对项目根目录/target/js-srouce下的文件进行压缩 -> 新的压缩js文件生成到项目根目录/target/generated-sources 下。

<plugin>
                <groupId>com.samaxes.maven</groupId>
                <artifactId>minify-maven-plugin</artifactId>
                <version>1.7.6</version>
                <executions>
                    <execution>
                        <id>wp-minify</id>
                        <configuration>
                            <!--${basedir} 项目根路径-->
                            <webappTargetDir>${basedir}</webappTargetDir>
                            <webappSourceDir>${basedir}</webappSourceDir>
                            <charset>UTF-8</charset>
                            <cssSourceDir>./</cssSourceDir>
                            <cssExcludes>
                                <cssExclude>**/*.css</cssExclude>
                            </cssExcludes>
                            <!--将jsSourceDir的js进行压缩，生成至jsTargetDir目录下 -->
                            <jsSourceDir>/target/js-sources</jsSourceDir>
                            <jsTargetDir>/target/generated-sources/</jsTargetDir>
                            <!--只对jsSourceDir下的jslib的所有js文件进行压缩处理-->
                            <jsIncludes>
                                <jsInclude>jslib/**/*.js</jsInclude>
                            </jsIncludes>
                            <!--不对.min.js文件进行压缩处理-->
                            <jsExcludes>
                                <jsExclude>**/*.min.js</jsExclude>
                            
                            </jsExcludes>

                <!-- WHITESPACE_ONLY：只压缩空格和转换一些特殊符号 -->
                <!-- SIMPLE_OPTIMIZATIONS：简单的压缩 -->
<!-- ADVANCED_OPTIMIZATIONS：高级压缩，此压缩方式下可能会将引用的第3方框架的方法名称修改，导致js报错；慎用。-->                                

<closureCompilationLevel>SIMPLE_OPTIMIZATIONS</closureCompilationLevel>
                <!-- js压缩引擎，默认值为YUI。可选值： -->
                <!-- YUI: 使用YUI Compressor压缩； -->
                <!-- CLOSURE: 使用Google Closure Compiler压缩 -->
                            <jsEngine>CLOSURE</jsEngine>
                            <skipMerge>true</skipMerge>
                            <nosuffix>true</nosuffix>
                        </configuration>
                        <goals>
                            <goal>minify</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

3.打包时将项目根目录/target/generated-sources下的文件拷贝 -> 将要打成war包的项目中。

<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.3</version>
				<configuration>
					<webResources>
                        <!--保持该顺序，否则启动时压缩的文件会被替换为原始js文件-->
                        <resource>
                            <directory>target/generated-sources</directory>
                            <includes>
                                <include>**/*.js</include>
                            </includes>
                           <!--不对文件进行变量替换，只是传输复制-->
                            <filtering>false</filtering>
                        </resource>
                        <resource>
                            <directory>src/main/webapp</directory>
                            <includes>
                                <include>**/*.js</include>
                                <include>**/*.html</include>
                            </includes>
                            <filtering>true</filtering>
                        </resource>
					</webResources>
				</configuration>
			</plugin>

最后对两种方式进行总结：

第一种方式：对js文件进行压缩后进行变量替换。

实现方式较简洁，容易理解。

如果对js文件压缩强度较大时，例如变量混淆，由于变量名已改变，压缩后的文件中的变量将无法进行正常替换。

由于需要变量替换，导致只能用较低压缩级别进行压缩。

第二种方式：对js文件变量替换后进行压缩。

该方式就没有第一种方式的缺点，由于压缩前已经先进行了变量替换。

缺点就是maven构建方式相对第一种方式较复杂些，文件复制次数为3次比第一种方式多1次，打包效率上较低。