คุณทำการลดขนาด Javascript โดยอัตโนมัติสำหรับเว็บแอปพลิเคชัน Java ของคุณได้อย่างไร


122

ฉันสนใจที่จะรับฟังวิธีที่คุณต้องการทำให้การย่อขนาด Javascript โดยอัตโนมัติสำหรับเว็บแอป Java ของคุณ ด้านล่างนี้เป็นประเด็นที่ฉันสนใจเป็นพิเศษ:

  • มันบูรณาการอย่างไร? เป็นส่วนหนึ่งของเครื่องมือสร้างของคุณตัวกรอง servlet โปรแกรมแบบสแตนด์อโลนหลังการประมวลผลไฟล์ WAR หรืออย่างอื่นหรือไม่?
  • มันเป็นเรื่องง่ายที่จะเปิดใช้งานและปิดการใช้งาน ? การพยายามแก้ไขข้อบกพร่องของสคริปต์ที่ย่อขนาดไม่น่าสนใจ แต่ก็มีประโยชน์สำหรับนักพัฒนาที่จะสามารถทดสอบได้ว่าการลดขนาดนั้นไม่ได้ทำลายอะไรเลย
  • มันทำงานอย่างโปร่งใสหรือไม่หรือมีผลข้างเคียงใด ๆ (นอกเหนือจากผลกระทบที่มีอยู่ในการลดขนาด) ที่ฉันต้องพิจารณาในการทำงานประจำวันของฉัน?
  • มันใช้minifier แบบไหน ?
  • มันขาดคุณสมบัติที่คุณคิดได้หรือไม่?
  • คุณชอบอะไรเกี่ยวกับเรื่องนี้?
  • สิ่งที่ไม่คุณชอบเกี่ยวกับมันได้หรือไม่

ส่วนใหญ่จะใช้เป็นข้อมูลอ้างอิงสำหรับโครงการในอนาคตของฉัน (และหวังว่า SOer คนอื่น ๆ จะพบว่ามันเป็นข้อมูลเช่นกัน) ดังนั้นเครื่องมือทุกประเภทจึงน่าสนใจ

(โปรดทราบว่านี่ไม่ใช่คำถามเกี่ยวกับ minifier ที่ดีที่สุดเรามีคนมากมายอยู่แล้ว)


มันดูน่าสนใจจริงๆไม่เคยได้ยินมาก่อน เครื่องมือทั้งหมดที่ฉันพบในการค้นหาอย่างรวดเร็วคือเครื่องมือแบบแมนนวลที่ทำงานเพียงครั้งเดียว คงจะดีไม่น้อยหากมีปลั๊กสำหรับมดหรือมาเวน หวังว่าคงมีคนตอบดีๆ
เจ

และปรากฏว่ามีคนทำ - ตรวจสอบคำตอบของ dfa: stackoverflow.com/questions/1379856/…
gustafc

คำตอบ:


65

minify-maven และ maven yui compressor เล่นได้ไม่ดีกับคุณสมบัติ ES6 สำหรับฉัน ณ เวลาที่แสดงความคิดเห็นนี้
DPM

13

เรากำลังใช้งาน Ant เพื่อย่อขนาดไฟล์ js ด้วย YUICompressor ระหว่างการสร้างการผลิตและใส่ผลลัพธ์ลงในโฟลเดอร์ที่แยกออกมา จากนั้นเราอัปโหลดไฟล์เหล่านั้นไปยังเว็บเซิร์ฟเวอร์ คุณสามารถค้นหาตัวอย่างที่ดีสำหรับการรวม YUI + Ant ได้ในบล็อกนี้

นี่คือตัวอย่าง:

<target name="js.minify" depends="js.preprocess">
    <apply executable="java" parallel="false">
        <fileset dir="." includes="foo.js, bar.js"/>
        <arg line="-jar"/>
        <arg path="yuicompressor.jar"/>
        <srcfile/>
        <arg line="-o"/>
        <mapper type="glob" from="*.js" to="*-min.js"/>
        <targetfile/>
    </apply>
</target>

2
snippet; ดี คุณกำหนดเป้าหมายใหม่script srcในการสร้าง dev หรือคุณเพียงแค่คัดลอกไฟล์ที่ไม่ได้ย่อขนาดลงในไดเร็กทอรีบีบอัด / js?
gustafc

สำหรับการใช้งานจริงอัปโหลดไฟล์บีบอัดทับไฟล์ต้นฉบับใน public_html / js สิ่งที่ดีคือไม่มีการเข้ารหัสหรือเปลี่ยนเส้นทางระหว่าง local และ production สิ่งที่แย่คือคุณต้องอัปโหลดและเขียนทับด้วยตนเอง (ฉันแน่ใจว่ามันเป็นแบบอัตโนมัติได้ แต่สำหรับเราแล้วมันไม่คุ้มที่จะอัปโหลด ไฟล์ js สองสามไฟล์นาน ๆ ครั้งจะไม่ใหญ่เกินไป)
serg

ฉันใช้รหัสของคุณ แต่มันสร้างไฟล์ย่อขนาดที่รูทของโปรเจ็กต์ของฉันฉันตั้งค่า<fileset dir="${generatedScriptsDir}" includes="**/*.js"/>แต่มันใช้ไม่ได้ ฉันจะสร้างไฟล์ในไฟล์ได้${generatedScriptsDir}อย่างไร
Vadorequest

ลองเพิ่มแอตทริบิวต์ "dir" ในแท็ก "ใช้" ตรวจสอบให้แน่ใจว่า '$ {
createdScriptsDir

12

ฉันคิดว่าหนึ่งในเครื่องมือที่ดีที่สุดและเหมาะสมกับงานคือwro4jลองดูhttps://github.com/wro4j/wro4j

ทำทุกอย่างที่คุณต้องการ:

  • จัดระเบียบทรัพยากรบนเว็บของโครงการ (js & css) ให้ดี
  • รวมและย่อขนาดในเวลาทำงาน (โดยใช้ตัวกรองแบบธรรมดา) หรือเวลาสร้าง (โดยใช้ปลั๊กอิน maven)
  • ฟรีและโอเพ่นซอร์ส: เผยแพร่ภายใต้ใบอนุญาต Apache 2.0
  • เครื่องมือลดขนาดต่างๆที่รองรับโดย wro4j: JsMin, Google Closure compressor, YUI ฯลฯ
  • ใช้งานง่ายมาก รองรับ Servlet Filter, Plain Java หรือ Spring Configuration
  • Javascript และ CSS Meta Frameworks Support: CoffeeScript, Less, Sass เป็นต้น
  • การตรวจสอบความถูกต้อง: JSLint, CSSLint ฯลฯ

สามารถทำงานในโหมดดีบักและโหมดการผลิต เพียงระบุไฟล์ทั้งหมดที่ควรจัดการ / ขั้นตอนก่อนและจัดการส่วนที่เหลือ

คุณสามารถรวมทรัพยากรที่ผสานลดขนาดและบีบอัดได้ดังนี้:

<script type="text/javascript" src="wro/all.js"></script>

2
ดูเหมือนเป็นเครื่องมือที่ดีจริงๆ ขอบคุณสำหรับการอัปเดต!
gustafc

เพิ่มการกำหนดเวอร์ชันให้กับไฟล์ทรัพยากรเพื่อบังคับให้รีเฟรชในฝั่งไคลเอ็นต์หรือไม่ ฉันไม่พบเอกสารใด ๆ เกี่ยวกับคุณลักษณะนี้
Qiang

สิ่งเดียวที่ฉันคิดถึงใน wro4j คือ css prefixer
inafalcao

เป็นไปได้ไหมที่จะให้บริการเนื้อหาคงที่ (สร้างโดยwroเซิร์ฟเวอร์ App) จากapacheเว็บเซิร์ฟเวอร์
HybrisHelp

8

ฉันได้เขียนมดมาโครสำหรับคอมไพเลอร์ Google Closure และ Yahoo Compressor และรวมไฟล์นี้ไว้ในโครงการเว็บต่างๆ

<?xml version="1.0" encoding="UTF-8"?>
<!-- CSS and JS minifier. -->
<!DOCTYPE project>
<project name="minifier" basedir=".">

  <property name="gc" value="compiler-r1592.jar" />
  <property name="yc" value="yuicompressor-2.4.6.jar" />

  <!-- Compress single js with Google Closure compiler -->
  <macrodef name="gc-js">
    <attribute name="dir" />
    <attribute name="src" />
    <sequential>
      <java jar="${gc}" fork="true">
        <!--
        - - compilation_level WHITESPACE_ONLY | SIMPLE_OPTIMIZATIONS | ADVANCED_OPTIMIZATIONS
        Specifies the compilation level to use. Default: SIMPLE_OPTIMIZATIONS
        - - warning_level QUIET | DEFAULT | VERBOSE
        Specifies the warning level to use.
        -->
        <arg line="--js=@{dir}/@{src}.js" />
        <arg line="--js_output_file=@{dir}/@{src}-min-gc.js" />
      </java>
    </sequential>
  </macrodef>

  <!-- Compress single js with Yahoo compressor -->
  <macrodef name="yc-js">
    <attribute name="dir" />
    <attribute name="src" />
    <sequential>
      <java jar="${yc}" fork="true">
        <arg value="@{dir}/@{src}.js" />
        <arg line="-o" />
        <arg value="@{dir}/@{src}-min-yc.js" />
      </java>
    </sequential>
  </macrodef>

  <!-- Compress all js in directory with Yahoo compressor -->
  <macrodef name="yc-js-all">
    <attribute name="dir" />
    <sequential>
      <apply executable="java" parallel="false">
        <fileset dir="@{dir}" includes="*.js" excludes="*-min*.js" />
        <arg line="-jar" />
        <arg path="${yc}" />
        <srcfile />
        <arg line="-o" />
        <mapper type="glob" from="*.js" to="@{dir}/*-min-yc.js" />
        <targetfile />
      </apply>
    </sequential>
  </macrodef>

  <!-- Compress all css in directory with Yahoo compressor -->
  <macrodef name="yc-css-all">
    <attribute name="dir" default="${build.css.dir}" />
    <sequential>
      <apply executable="java" parallel="false">
        <fileset dir="@{dir}" includes="*.css" excludes="*-min*.css" />
        <arg line="-jar" />
        <arg path="${yc}" />
        <arg line="-v --line-break 0" />
        <srcfile />
        <arg line="-o" />
        <mapper type="glob" from="*.css" to="@{dir}/*-min.css" />
        <targetfile />
      </apply>
    </sequential>
  </macrodef>
</project>
  • การรวม: <import file="build-minifier.xml" />ใน build.xml ของคุณจากนั้นเรียกใช้งานมดตามปกติ:<gc-js dir="${build.js.dir}" src="prototype" /> <yc-js-all dir="${build.js.dir}" />

  • ตัวเลือกของตัวย่อสองตัว: คอมไพเลอร์ Google Closure และ Yahoo compressor คุณควรดาวน์โหลดด้วยตนเองและวางไว้ใกล้ไฟล์ xml

  • Minifiers ข้ามไฟล์ที่บีบอัดแล้ว (ลงท้ายด้วย-min*)

  • โดยปกติฉันจะสร้างสคริปต์สามเวอร์ชัน: ไม่บีบอัด (เช่นprototype.js) สำหรับการดีบักบีบอัดด้วยคอมไพเลอร์ปิด ( prototype-min-gc.js) สำหรับเซิร์ฟเวอร์ที่ใช้งานจริงบีบอัดด้วย Yahoo ( prototype-min-yc.js) สำหรับการแก้ไขปัญหาเนื่องจากคอมไพเลอร์การปิดใช้การเพิ่มประสิทธิภาพที่มีความเสี่ยงและบางครั้งก็สร้างไฟล์บีบอัดที่ไม่ถูกต้องและคอมเพรสเซอร์ Yahoo ปลอดภัยกว่า

  • Yahoo Compressor สามารถลดขนาดไฟล์ทั้งหมดใน dir ด้วยมาโครเดียวคอมไพเลอร์ปิดไม่สามารถทำได้


8

ฉันลองสองวิธี:

  1. โดยใช้ตัวกรอง servlet เมื่ออยู่ในโหมดการใช้งานจริงตัวกรองจะเปิดใช้งานและบีบอัดข้อมูลใด ๆ ที่ถูกผูกไว้กับ URL เช่น * .css หรือ * .js
  2. ใช้ maven และyuicompressor-maven-plugin ; การบีบอัดเป็นแบบ una-tantum (เมื่อประกอบสงครามการผลิต )

แน่นอนว่าวิธีแก้ปัญหาหลังนั้นดีกว่าเนื่องจากไม่ใช้ทรัพยากรในขณะรันไทม์ (เว็บแอปของฉันใช้ google app engine) และไม่ทำให้รหัสแอปพลิเคชันของคุณซับซ้อน ดังนั้นสมมติว่ากรณีหลังนี้ในคำตอบต่อไปนี้:

มันบูรณาการอย่างไร? เป็นส่วนหนึ่งของเครื่องมือสร้างของคุณตัวกรอง servlet โปรแกรมแบบสแตนด์อโลนหลังการประมวลผลไฟล์ WAR หรืออย่างอื่นหรือไม่?

ใช้ maven

เปิดและปิดใช้งานง่ายไหม การพยายามแก้ไขข้อบกพร่องของสคริปต์ที่ย่อขนาดไม่น่าสนใจ แต่ก็มีประโยชน์สำหรับนักพัฒนาที่จะสามารถทดสอบได้ว่าการลดขนาดนั้นไม่ได้ทำลายอะไรเลย

คุณจะเปิดใช้งานเมื่อรวมสงครามครั้งสุดท้ายเท่านั้น ในโหมดการพัฒนาคุณจะเห็นทรัพยากรของคุณในเวอร์ชันที่ไม่มีการบีบอัด

มันทำงานอย่างโปร่งใสหรือไม่หรือมีผลข้างเคียงใด ๆ (นอกเหนือจากผลกระทบที่มีอยู่ในการลดขนาด) ที่ฉันต้องพิจารณาในการทำงานประจำวันของฉัน?

อย่างแน่นอน

มันใช้ minifier แบบไหน?

คอมเพรสเซอร์ YUI

มันขาดคุณสมบัติที่คุณคิดได้หรือไม่?

ไม่มันสมบูรณ์และใช้งานง่ายมาก

คุณชอบอะไรเกี่ยวกับเรื่องนี้?

มันรวมเข้ากับเครื่องมือโปรดของฉัน (maven) และปลั๊กอินอยู่ในที่เก็บส่วนกลาง (เป็นพลเมืองดี)


ปลั๊กอิน Maven - ดี น่าเสียดายที่โครงการปัจจุบันของฉันใช้มดทั้งหมด :)
gustafc

คุณสามารถสร้างเป้าหมายที่สร้าง "ไฟล์สงครามการผลิต" โดยใช้ภารกิจ YUI ant
dfa

4

ฉันคิดว่าคุณต้องมีไลบรารีการบีบอัดตัวอย่างเช่นแท็ก Granule

http://code.google.com/p/granule/

มัน gzip และรวม javascripts ที่ห่อด้วย g: บีบอัดแท็กโดยใช้วิธีการที่แตกต่างกันนอกจากนี้ยังมีงาน Ant ด้วย

ตัวอย่างโค้ดคือ:

<g: ลูกประคบ>
  <script type = "text / javascript" src = "common.js" />
  <script type = "text / javascript" src = "closure / goog / base.js" />
  <script>
       goog.require ( 'goog.dom');
       goog.require ( 'goog.date');
       goog.require ( 'goog.ui.DatePicker');
  </ script>
  <script type = "text / javascript">
      var dp = goog.ui.DatePicker ใหม่ ();
      dp.render (document.getElementById ( 'datepicker'));
  </ script>
</ g: ลูกประคบ>
...


ใช่มันดูดีทีเดียว
gustafc

3

ฉันแปลกใจจริงๆที่ไม่มีใครพูดถึงJAWR - https://jawr.github.io

ค่อนข้างเป็นผู้ใหญ่และรองรับคุณสมบัติมาตรฐานทั้งหมดที่คาดหวังและอื่น ๆ อีกเล็กน้อย นี่คือวิธีที่ถือตามเกณฑ์ที่ยอดเยี่ยมของ OP

มันบูรณาการอย่างไร? เป็นส่วนหนึ่งของเครื่องมือสร้างของคุณตัวกรอง servlet โปรแกรมแบบสแตนด์อโลนหลังการประมวลผลไฟล์ WAR หรืออย่างอื่นหรือไม่?

เดิมทีมันได้ / การประมวลผลหนักยกที่เริ่มต้นการประยุกต์ใช้และการให้บริการอยู่บนพื้นฐานของเซิร์ฟเล็ต เริ่มต้นด้วย 3.x พวกเขาเพิ่มการสนับสนุนสำหรับการบูรณาการเวลาที่สร้าง

การสนับสนุน JSP และ Facelets มีให้ผ่านไลบรารีแท็ก JSP ที่กำหนดเองเพื่อนำเข้าทรัพยากรที่ประมวลผล นอกจากนั้นเป็นทรัพยากร JS รถตักดินจะดำเนินการที่สนับสนุนการโหลดทรัพยากรจากหน้าเว็บ HTML คง

เปิดและปิดใช้งานง่ายไหม การพยายามแก้ไขข้อบกพร่องของสคริปต์ที่ย่อขนาดไม่น่าสนใจ แต่ก็มีประโยชน์สำหรับนักพัฒนาที่จะสามารถทดสอบได้ว่าการลดขนาดนั้นไม่ได้ทำลายอะไรเลย

debug=onตัวเลือกให้ใช้ก่อนการเริ่มต้นแอ็พพลิเคชันและGETสามารถระบุพารามิเตอร์ที่กำหนดเองในแต่ละคำขอในการใช้งานจริงเพื่อสลับโหมดดีบักแบบเลือกที่รันไทม์สำหรับคำขอดังกล่าว

มันใช้ minifier แบบไหน?

สำหรับ JS รองรับ YUI Compressor และ JSMin สำหรับ CSS ฉันไม่แน่ใจ

มันขาดคุณสมบัติที่คุณคิดได้หรือไม่?

SASSการสนับสนุนอยู่ในใจ LESSที่กล่าวว่ามันไม่สนับสนุน


2

โครงการของเราจัดการได้หลายวิธี แต่เรายังคงใช้YUI Compressor ต่อไปผ่านการทำซ้ำต่างๆของเรา

ในตอนแรกเรามี servlet จัดการการบีบอัดสำหรับ JavaScript ในครั้งแรกที่มีการเข้าถึงไฟล์นั้น ๆ มันถูกแคชแล้ว เรามีระบบจัดการไฟล์คุณสมบัติที่กำหนดเองอยู่แล้วดังนั้นเราจึงอัปเดตไฟล์คอนฟิกูเรชันของเราเพื่อรองรับการเปิดหรือปิดใช้งานคอมเพรสเซอร์ขึ้นอยู่กับสภาพแวดล้อมที่เรากำลังทำงานอยู่

ตอนนี้สภาพแวดล้อมการพัฒนาไม่เคยใช้ JavaScript ที่บีบอัดเพื่อการดีบัก แต่เราจัดการการบีบอัดในกระบวนการสร้างของเราเมื่อส่งออกแอปพลิเคชันของเราไปยังไฟล์ WAR

ลูกค้าของเราไม่เคยแจ้งข้อกังวลเกี่ยวกับการบีบอัดและนักพัฒนาไม่สังเกตเห็นจนกว่าพวกเขาตัดสินใจที่จะดีบัก JavaScript ดังนั้นฉันว่ามันค่อนข้างโปร่งใสโดยมีผลกระทบด้านข้างน้อยที่สุด


คุณใช้คอมเพรสเซอร์ YUI จากกระบวนการสร้างของคุณอย่างไร? ปลั๊กอิน Maven หรืออย่างอื่น?
gustafc

1
ขออภัยเราใช้ Ant อยู่ในขณะนี้ นี่คือลิงค์ที่มีประโยชน์สำหรับ Ant Task: blog.gomilko.com/2007/11/29/yui-compression-tool-as-ant-task
doomspork

1

สิ่งนี้ใช้ได้ผลสำหรับฉัน: https://bitbucket.org/m6_russell_francis/yui-compressor-ant-task/wiki/Home

<!-- minimize all static *.css & *.js content -->
<target name="static-content-minify">

    <taskdef name="yuicompressor"
             classname="com.metrosix.yuicompressor.anttask.YuiCompressorTask">
        <classpath>
            <pathelement location="${jar.yui.compressor}"/>
            <pathelement location="${jar.yui.anttask.compressor}" />
        </classpath>
    </taskdef>

    <yuicompressor todir="${build.static.content.min}" charset="utf-8" 
        preserveallsemicolons="true" munge="true" >
        <fileset dir="${src.static.content}">
            <include name="**/*.css"/>
            <include name="**/*.js"/>
        </fileset>
    </yuicompressor>
</target>

ฉันได้รับ $ {jar.yui.compressor} จาก search.maven.org: search.maven.org/…
Reverse Tarzan

1

ฉันเขียนกรอบการทำงานสำหรับการจัดการสินทรัพย์เว็บที่เรียกว่าHumpty มีจุดมุ่งหมายเพื่อให้ง่ายและทันสมัยกว่า jawr หรือ wro4j โดยใช้ WebJars และ ServiceLoaders

มันบูรณาการอย่างไร? เป็นส่วนหนึ่งของเครื่องมือสร้างของคุณตัวกรอง servlet โปรแกรมแบบสแตนด์อโลนหลังการประมวลผลไฟล์ WAR หรืออย่างอื่นหรือไม่?

ในการพัฒนา servlet จะประมวลผลสินทรัพย์ตามความจำเป็น จากนั้นเนื้อหาจะถูกรวบรวมไว้ล่วงหน้าก่อนที่จะใช้งานจริงและวางไว้ในโฟลเดอร์สาธารณะเพื่อให้ส่วนเดียวที่ใช้สร้างสิ่งที่ถูกต้องรวมไว้ใน HTML

เปิดและปิดใช้งานง่ายไหม การพยายามแก้ไขข้อบกพร่องของสคริปต์ที่ย่อขนาดไม่น่าสนใจ แต่ก็มีประโยชน์สำหรับนักพัฒนาที่จะสามารถทดสอบได้ว่าการลดขนาดนั้นไม่ได้ทำลายอะไรเลย

ซึ่งจะทำได้โดยการสลับระหว่างโหมดการพัฒนาและโหมดการผลิต

มันทำงานอย่างโปร่งใสหรือไม่หรือมีผลข้างเคียงใด ๆ (นอกเหนือจากผลกระทบที่มีอยู่ในการลดขนาด) ที่ฉันต้องพิจารณาในการทำงานประจำวันของฉัน?

ฉันเชื่อว่ามีความโปร่งใส แต่ไม่สนับสนุนการใช้ WebJars เป็นอย่างยิ่ง

มันใช้ minifier แบบไหน?

ไม่ว่าคุณจะใช้ปลั๊กอินใดใน classpath ของคุณ ขณะนี้กำลังดูการเขียนปลั๊กอินสำหรับ Google Closure Compiler

มันขาดคุณสมบัติที่คุณคิดได้หรือไม่?

ยังคงเป็นรุ่นก่อนวางจำหน่ายแม้ว่าฉันจะใช้ในการผลิต ปลั๊กอิน maven ยังต้องการการทำงานอีกมาก

คุณชอบอะไรเกี่ยวกับเรื่องนี้?

ความเรียบง่ายเพียงแค่เพิ่มการอ้างอิงเพื่อกำหนดค่ากรอบงาน

คุณไม่ชอบอะไรเกี่ยวกับเรื่องนี้?

เป็นที่รักของฉันฉันรักมันทั้งหมด;)


1

ไปงานปาร์ตี้ที่นี่ช้ามาก แต่คิดว่าอาจช่วยให้ใครบางคนยังคงมองหาคำตอบที่แตกต่างออกไป:

หลังจากพยายามใช้ YUI Compressor ฉันรู้สึกผิดหวังที่มันเข้ากันไม่ได้กับ jQuery และ Prism เวอร์ชันล่าสุด (ไลบรารี JS ของบุคคลที่สามหลักสองตัวที่ฉันต้องการสำหรับโปรเจ็กต์ของฉันซึ่งฉันต้องการบีบอัดเป็นไฟล์เดียว) ดังนั้นฉันจึงตัดสินใจใช้Terserซึ่งเป็นทางแยกของ Uglify-JS ที่รองรับ ES6 + ฉันไม่สามารถทำให้มันทำงานได้โดยตรงโดยใช้<exec>งาน แต่การใช้วิธีบรรทัดคำสั่งของ Windows ใช้ได้กับ Win 10 อย่างน้อย (ไม่ได้บอกว่ามันทำงานไม่ได้ แต่นี่เป็นการแก้ปัญหาที่ง่ายมาก) ไม่จำเป็นต้องเพิ่มสิ่งอื่นใดให้กับตัวแปรระบบ Path (เนื่องจากปกติจะมีการเพิ่ม Node.JS ระหว่างการติดตั้ง) ก่อนอื่นฉันใช้<concat>งานANT เพื่อสร้างไฟล์ขนาดใหญ่ที่ไม่มีการบีบอัด ใช้<fileset>ตามที่จะรักษาคำสั่งซื้อ (ถ้านั่นสำคัญ)

<concat destfile="${js-big-file}" encoding="UTF-8" outputencoding="UTF-8" fixlastline="true">
   <filelist refid="js-input-filelist"/>
</concat>

จากนั้นใช้<exec>งานเพื่อรันโปรแกรม NPM ใด ๆ เช่น Terser Apache หน้าคู่มือในงานนี้ชี้ให้เห็นนี้เป็นของ Windows แก้ปัญหาสำหรับการเรียกใช้ไฟล์ค้างคาว แต่จริงๆมันช่วยให้คุณทำงานเพียงเกี่ยวกับการประยุกต์ใช้บรรทัดคำสั่งใด ๆ (แม้กระทั่งผู้ที่<exec>ลึกลับไม่สามารถหาอย่างอื่น)

<exec executable="cmd">
   <arg value="/c"/>
   <arg value="terser"/>
   <arg value="${js-big-file}" />
   <arg value="-o" />
   <arg value="${smaller-js-file}"/>  
</exec>

บูรณาการ?เป็นส่วนหนึ่งของสคริปต์บิลด์ ANT (ปลั๊กอิน DITA Open Toolkit เพื่อรองรับ JavaScript ที่กำหนดเองเหนือสิ่งอื่นใด - ไม่ใช่ Java Web application แต่ใช้ Java เพื่อสร้างเอาต์พุต HTML5) ดังนั้นการรวมจึงไม่มากไปกว่าการเพิ่มสิ่งเหล่านี้ งานไปยังเป้าหมายใหม่ (มีรหัสเพิ่มเติมเกี่ยวกับการตั้งค่าเริ่มต้นและการตรวจสอบพารามิเตอร์อินพุต!)

ง่ายต่อการเปิด / ปิด? ในกรณีของฉันฉันมีพารามิเตอร์ที่ฉันส่งผ่านไปยัง ANT Build เพื่อรวมการสร้างและการย่อขนาดไฟล์ JS ใช่มันจะดำเนินการเป้าหมายนี้ก็ต่อเมื่อฉันตั้งค่าพารามิเตอร์เป็น 'ใช่' นั่นเป็นเรื่องง่ายมากที่จะตั้งค่าในโครงสร้าง ANT

โปร่งใสจนถึงตอนนี้ดูเหมือนว่าจะไม่มีผลกับไฟล์ JS หลายไฟล์ที่ฉันรวมอยู่ด้วย บางส่วนเป็นของฉันเอง (และฉันไม่ใช่ผู้เชี่ยวชาญ JS ไม่ว่าจะด้วยวิธีใดก็ตาม) และบางส่วนก็เป็นไลบรารี JS ทั่วไป

Minifier Terser แต่คุณสามารถใช้ minified กับอินพุตบรรทัดคำสั่งด้วยวิธีนี้

ขาดคุณสมบัติ? Terser ใช้งานได้กับ JavaScript เท่านั้น ถ้าฉันต้องการทำเช่นเดียวกันกับไฟล์ CSS ของฉัน (ซึ่งฉันทำ) ฉันใช้ YUI Compressor

ชอบว่าเป็นโครงการที่มีการใช้งานอยู่ในปัจจุบันและมีการสนับสนุนที่ดี นอกจากนี้การใช้งานปัจจุบัน (เรียกผ่าน<exec>เป้าหมายANT เท่านั้น) ช่วยให้ฉันสามารถสลับตัวย่อหากฉันต้องใช้อย่างอื่นตามท้องถนน

ไม่ชอบที่ต้องใช้ Node.JS. ไม่มีอะไรต่อต้าน Node.JS โปรดทราบว่าโครงการเฉพาะนี้ไม่ต้องการเป็นอย่างอื่น ฉันชอบใช้ไฟล์ Java. jar เช่น YUI Compressor สำหรับสิ่งนี้มาก (ฉันสามารถแจกจ่ายได้อย่างง่ายดายด้วยปลั๊กอินที่ฉันควรจะทำ)


ยินดีต้อนรับ Latecomers เช่นกัน! ฉันยอมรับว่ามันน่ารำคาญที่มีโปรเจ็กต์ขึ้นอยู่กับสภาพแวดล้อมการเขียนโปรแกรมที่แตกต่างกันสองแบบ (Java + Node) ถึงกระนั้นก็ไม่น่าแปลกใจที่งาน Javascript ส่วนใหญ่เกิดขึ้นในชุมชนโหนดดังนั้นจึงไม่มีอะไรให้ทำมากนักและ Terser ดูเหมือนจะมีแรงผลักดันมากมายในทุกวันนี้ ขอบคุณสำหรับการสนับสนุนของคุณ!
gustafc
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.