压缩css到war包中，添加支持es6语法的js压缩器

1、pom使用插件变更

pom.xml变更前

xml 复制代码

<plugins>
  <plugin>
      <groupId>net.alchim31.maven</groupId>
      <artifactId>yuicompressor-maven-plugin</artifactId>
      <version>1.5.1</version>
      <executions>
          <execution>
              <phase>compile</phase>
              <goals>
                  <goal>compress</goal>
              </goals>
              <configuration>
                  <excludes>
                      <exclude>**/claimTree.js</exclude>
                      <exclude>**/*.min.js</exclude>
                      <exclude>**/*-min.js</exclude>
                      <exclude>**/chart/*.js</exclude>
                      <exclude>**/echarts-all.js</exclude>
                      <exclude>**/echarts.js</exclude>
                      <exclude>**/ffmpeg_asm.js</exclude>
                      <exclude>**/iconfont.css</exclude>
                      <exclude>**/incopat.highLight.nav.js</exclude>
                      <exclude>**/clipboard-polyfill.js</exclude>
                      <exclude>**/gui.nocache.js</exclude>
                      <exclude>**/editor.min.css</exclude>
                      <exclude>**/editor.css</exclude>
                      <exclude>**/0BB0EFAAF1EC57DDBFC41F4662CC5A44.cache.js</exclude>
                      <exclude>**/analysisDatePicker.min.js</exclude>
                      <exclude>**/datePicker.css</exclude>								
                      <exclude>**/crypto-js.js</exclude>
                      <exclude>**/ilnmcio.js</exclude>
                      <exclude>**/quickReport/*.js</exclude>
                      <exclude>**/quickReport/utils/**</exclude>
                      <exclude>**/quickReport/components/**</exclude>
                      <exclude>**/quickReport/public/**</exclude>
                      <exclude>**/js/vue3/**</exclude>
                      <exclude>**/dist/js/**</exclude>
                      <exclude>**/dist/css/**</exclude>
                      <exclude>**/oneTrustCookie/**</exclude>
                  </excludes>
                  <encoding>UTF-8</encoding>
                  <jswarn>false</jswarn>
                  <failOnWarning>false</failOnWarning>
                  <nosuffix>true</nosuffix>
                  <force>true</force>
                  <removeIncluded>true</removeIncluded>
                  <linebreakpos>-1</linebreakpos>
              </configuration>
          </execution>
      </executions>
    </plugin>
  </plugins>
</build>

pom.xml变更后

xml 复制代码

<build>
  <plugins>
    <plugin>
          <groupId>net.alchim31.maven</groupId>
          <artifactId>yuicompressor-maven-plugin</artifactId>
          <version>1.5.1</version>
          <executions>
            <execution>
              <phase>prepare-package</phase>
              <goals>
                <goal>compress</goal>
              </goals>
              <configuration>
                <excludes>
                  <exclude>**/*.js</exclude>
                  <exclude>**/*min.js</exclude>
                  <exclude>**/*min.css</exclude>
                </excludes>
                <encoding>UTF-8</encoding>
                <jswarn>false</jswarn>
                <failOnWarning>false</failOnWarning>
                <nosuffix>true</nosuffix>
                <force>true</force>
                <removeIncluded>true</removeIncluded>
                <linebreakpos>-1</linebreakpos>
                <webappDirectory>${project.build.directory}/min</webappDirectory>
              </configuration>
            </execution>
          </executions>
        </plugin>

        <!--只压缩js,css由yui的插件压缩-->
        <!--https://blutorange.github.io/closure-compiler-maven-plugin/examples/basic.html-->
        <plugin>
          <groupId>com.github.blutorange</groupId>
          <artifactId>closure-compiler-maven-plugin</artifactId>
          <version>2.21.0</version>
          <configuration>
            <!--压缩源文件目录-->
            <baseSourceDir>${project.basedir}/src/main/webapp/resources</baseSourceDir>
            <!--压缩后文件输出目录，由maven-war-plugin拷贝到war包中-->
            <baseTargetDir>${project.build.directory}/minifyjs</baseTargetDir>
          </configuration>
          <executions>
            <execution>
              <id>default-minify</id>
              <configuration>
                <encoding>UTF-8</encoding>
                <includes>
                  <include>**/*.js</include></includes>
                <excludes>
                  <exclude>**/*.min.js</exclude>
                  <exclude>**/claimTree.js</exclude>
                  <exclude>**/*.min.js</exclude>
                  <exclude>**/chart/*.js</exclude>
                  <exclude>**/echarts-all.js</exclude>
                  <exclude>**/echarts.js</exclude>
                  <exclude>**/ffmpeg_asm.js</exclude>
                  <exclude>**/incopat.highLight.nav.js</exclude>
                  <exclude>**/clipboard-polyfill.js</exclude>
                  <exclude>**/gui.nocache.js</exclude>
                  <exclude>**/0BB0EFAAF1EC57DDBFC41F4662CC5A44.cache.js</exclude>
                  <exclude>**/crypto-js.js</exclude>
                  <exclude>**/ilnmcio.js</exclude>
                  <exclude>**/quickReport/*.js</exclude>
                  <exclude>**/quickReport/utils/**</exclude>
                  <exclude>**/quickReport/components/**</exclude>
                  <exclude>**/quickReport/public/**</exclude>
                  <exclude>**/js/vue3/**</exclude>
                  <exclude>**/dist/js/**</exclude>
                  <exclude>**/oneTrustCookie/**</exclude>

                  <exclude>**/*jquery*.js</exclude>
                  <exclude>**/d3/**</exclude>
                  <exclude>**/framework/**</exclude>
  <!--								<exclude>**/dhtmlx/**</exclude>-->
                  <exclude>**/My97DatePicker/**</exclude>
                  <exclude>**/advancedCluster/**</exclude>
                </excludes>
                <skipMerge>true</skipMerge>

                <!--Refers to which version of ECMAScript your code will be returned in.-->
                <closureLanguageOut>ECMASCRIPT_2015</closureLanguageOut>

                <!-- js文件輸出格式，默認爲#{path}/#{basename}.min.#{extension} -->
                <outputFilename>#{path}/#{basename}.#{extension}</outputFilename>

                <!-- 使用closure壓縮時的壓縮級別，默認值爲SIMPLE_OPTIMIZATIONS。可選值： -->
                <!-- WHITESPACE_ONLY：只壓縮空格和轉換一些特殊符號 -->
                <!-- SIMPLE_OPTIMIZATIONS：簡單的壓縮 -->
                <!-- ADVANCED_OPTIMIZATIONS：高級壓縮，此壓縮方式下可能會將引用的第3方框架/其它js文件中的的方法名稱修改，導致js報錯；慎用。 -->
                <closureCompilationLevel>SIMPLE_OPTIMIZATIONS</closureCompilationLevel>

                <!--https://stackoverflow.com/questions/53508182/how-do-i-overcome-object-literals-cannot-contain-duplicate-keys-in-es5-strict-m-->
                <closureWarningLevels>
                  <es5Strict>OFF</es5Strict>
                </closureWarningLevels>
                <closureEmitUseStrict>false</closureEmitUseStrict>
              </configuration>
              <goals>
                <goal>minify</goal>
              </goals>
              <!--在maven的generate-resources阶段执行该插件-->
              <phase>generate-resources</phase>
            </execution>
          </executions>
        </plugin>		
    </plugins>
</build>

2、插件各个属性的作用

这两个插件在项目中主要用于不同类型资源（CSS 和 JavaScript）的压缩，它们之间的关联在于共同为项目的资源优化服务，yuicompressor-maven-plugin 负责压缩 CSS 文件，closure-compiler-maven-plugin 负责压缩 JavaScript 文件。下面为你详细解释每个插件及其属性的作用：

1、`yuicompressor-maven-plugin`

1、插件概述

该插件使用 YUI Compressor 工具对 CSS 和 JavaScript 文件进行压缩，以减少文件大小，提升网页加载速度。

2、属性解释

xml 复制代码

<plugin>
    <groupId>net.alchim31.maven</groupId>
    <artifactId>yuicompressor-maven-plugin</artifactId>
    <version>1.5.1</version>
    <executions>
        <execution>
            <phase>prepare-package</phase>
            <goals>
                <goal>compress</goal>
            </goals>
            <configuration>
                <excludes>
                    <exclude>**/*.js</exclude>
                    <exclude>**/*min.js</exclude>
                    <exclude>**/*min.css</exclude>
                </excludes>
                <encoding>UTF-8</encoding>
                <jswarn>false</jswarn>
                <failOnWarning>false</failOnWarning>
                <nosuffix>true</nosuffix>
                <force>true</force>
                <removeIncluded>true</removeIncluded>
                <linebreakpos>-1</linebreakpos>
                <webappDirectory>${project.build.directory}/min</webappDirectory>
            </configuration>
        </execution>
    </executions>
</plugin>

<groupId>、<artifactId>、<version> ：分别指定插件的组织标识、插件名称和版本号。
<phase> ：prepare-package 表示该插件在 Maven 生命周期的 prepare-package 阶段执行，此阶段通常在打包之前，用于做一些准备工作。
<goal> ：compress 表示执行文件压缩操作。
<excludes> ：指定不需要压缩的文件或目录，这里排除了所有 JavaScript 文件、以 .min.js 结尾的文件和以 .min.css 结尾的文件，因为这些文件可能已经是压缩过的。
<encoding> ：设置文件编码为 UTF - 8。
<jswarn> ：false 表示在压缩 JavaScript 文件时不显示警告信息。
<failOnWarning> ：false 表示即使出现警告也不会使构建失败。
<nosuffix> ：true 表示压缩后的文件不添加后缀，即压缩后的文件与原文件同名。
<force> ：true 表示强制覆盖已存在的压缩文件。
<removeIncluded> ：true 表示移除被包含的文件。
<linebreakpos> ：-1 表示在压缩后的文件中不插入换行符。
<webappDirectory> ：指定压缩后文件的输出目录，${project.build.directory}/min 表示在项目构建目录下的 min 文件夹。

2、`closure-compiler-maven-plugin`

1、插件概述

该插件使用 Google Closure Compiler 对 JavaScript 文件进行压缩和优化。

2、属性解释

xml 复制代码

<plugin>
    <groupId>com.github.blutorange</groupId>
    <artifactId>closure-compiler-maven-plugin</artifactId>
    <version>2.21.0</version>
    <configuration>
        <baseSourceDir>${project.basedir}/src/main/webapp/resources</baseSourceDir>
        <baseTargetDir>${project.build.directory}/minifyjs</baseTargetDir>
    </configuration>
    <executions>
        <execution>
            <id>default-minify</id>
            <configuration>
                <encoding>UTF-8</encoding>
                <includes>
                    <include>**/*.js</include>
                </includes>
                <excludes>
                    <!-- 众多排除项 -->
                </excludes>
                <skipMerge>true</skipMerge>
                <closureLanguageOut>ECMASCRIPT_2015</closureLanguageOut>
                <outputFilename>#{path}/#{basename}.#{extension}</outputFilename>
                <closureCompilationLevel>SIMPLE_OPTIMIZATIONS</closureCompilationLevel>
                <closureWarningLevels>
                    <es5Strict>OFF</es5Strict>
                </closureWarningLevels>
                <closureEmitUseStrict>false</closureEmitUseStrict>
            </configuration>
            <goals>
                <goal>minify</goal>
            </goals>
            <phase>generate-resources</phase>
        </execution>
    </executions>
</plugin>

<groupId>、<artifactId>、<version> ：同样分别指定插件的组织标识、插件名称和版本号。
<baseSourceDir> ：指定要压缩的 JavaScript 文件的源目录，${project.basedir}/src/main/webapp/resources 表示项目根目录下的 src/main/webapp/resources 文件夹。
<baseTargetDir> ：指定压缩后 JavaScript 文件的输出目录，${project.build.directory}/minifyjs 表示项目构建目录下的 minifyjs 文件夹。
<phase> ：generate-resources 表示该插件在 Maven 生命周期的 generate-resources 阶段执行，此阶段用于生成项目资源。
<goal> ：minify 表示执行 JavaScript 文件的压缩操作。
<encoding> ：设置文件编码为 UTF - 8。
<includes> ：指定要压缩的文件，这里是所有 JavaScript 文件。
<excludes> ：列出了一系列不需要压缩的 JavaScript 文件和目录，如以 .min.js 结尾的文件、特定名称的文件和特定目录下的文件。
<skipMerge> ：true 表示跳过文件合并操作，只进行压缩。
<closureLanguageOut> ：指定压缩后 JavaScript 代码遵循的 ECMAScript 版本，这里是 ECMAScript 2015。
<outputFilename> ：定义压缩后文件的命名格式，#{path}/#{basename}.#{extension} 表示保持原文件路径和文件名不变。
<closureCompilationLevel> ：指定压缩级别，SIMPLE_OPTIMIZATIONS 表示简单压缩，不会对代码进行过多修改。
<closureWarningLevels> ：设置警告级别，es5Strict 为 OFF 表示关闭 ES5 严格模式的警告。
<closureEmitUseStrict> ：false 表示不在压缩后的代码中添加 "use strict"; 指令。

综上所述，这两个插件协同工作，yuicompressor-maven-plugin 负责 CSS 文件的压缩，closure-compiler-maven-plugin 负责 JavaScript 文件的压缩，共同为项目的资源优化和性能提升服务。

压缩css到war包中，添加支持es6语法的js压缩器

1、pom使用插件变更

2、插件各个属性的作用

1、yuicompressor-maven-plugin

1、插件概述

2、属性解释

2、closure-compiler-maven-plugin

1、插件概述

2、属性解释

1、`yuicompressor-maven-plugin`

2、`closure-compiler-maven-plugin`